electron桌面应用程序搭建及简单运行
<p>electron:官方文档https://www.electronjs.org/解释了桌面应用的开发好处。</p><blockquote><p>如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。</p></blockquote>
<p>如上面所提到：<strong>会 JavaScript, HTML 和 CSS</strong> 就可以开发。我们学习 <strong>electron</strong> 桌面应用有下面这些优势：</p>
<blockquote><p>1.减少学习成本。 前端开发者不需要去学习新的开发语言，学习不会花费很多时间；而且，electron学习难度会比其他C#、.net等简单许多,对于许多开发者是友善的。<br />2.庞大的社区：electron是github官方产品，不管是框架技术、用户使用数量，还是用户信任度，都是得到各界开发人士肯定的。<br />3.减少工作量： Electron 是跨平台的，可以同时开发 Web 应用和桌面应用，无论是 UI，还是代码（JS），大多数资源都可以共享，这也为开发者大大减少了工作量，甚至企业也无需重复投入人力来开发系统。<br />4.未来发展市场广阔。从<strong>electron</strong>的主要用户来看，很多都是大厂，如蚂蚁金服、小米、华为、GitHub（Electron 就是 GitHub 推出的）、微软等，由于现在 GitHub 被微软收购了，因而目前 Electron 的后台是微软。因此学习 Electron 不用担心以后没市场，毕竟，各大厂都在用 Electron</p></blockquote>
<p>现在来学习一下<strong>electron</strong>吧！</p>
<h2>一、搭建开发环境</h2>
<p>官方给出：</p>
<blockquote><p>Electron 支持Windows 7 及以上版本—任何在低版本Windows上开发Electron的尝试都将是徒劳无功的。</p></blockquote>
<p><strong>electron</strong> 是nodejs提供技术插件支持，首先，为避免一些编译环境不必要的错误，安装<strong>nodejs最新版本</strong>node下载</p>
<p>再安装git git下载(下面远程拉取官方实例代码需要用到)</p>
<h2>二、创建项目</h2>
<h3>1.安装插件:</h3>
<div class="jb51code"><pre class="brush:bash;">cnpm i -g electron
npm i -g electron
yarn electron
</pre></div>
<p>选择任意一种安装方式</p>
<p>建议使用</p>
<div class="jb51code"><pre class="brush:bash;">cnpm i -g electron</pre></div>
<h3>2.创建项目：</h3>
<p>方法一:</p>
<div class="jb51code"><pre class="brush:bash;">npx create-electron-app xxx //其中npx为node最新10版本内置命令</pre></div>
<p>方法二:</p>
<div class="jb51code"><pre class="brush:bash;">cnpm i -g yarn //安装yarn命令
yarn create-electron-app xxx</pre></div>
<p>方法三：</p>
<div class="jb51code"><pre class="brush:bash;">cnpm install -g @electron-forge/cli //安装electron-forge脚手架
electron-forge init xxx //创建、初始化项目
cd xxx //进入xxx项目目录
npm start //运行项目</pre></div>
<p>方法四：远程仓库拉取</p>
<p>克隆示例项目的仓库</p>
<div class="jb51code"><pre class="brush:bash;">$ git clone https://github.com/electron/electron-quick-start</pre></div>
<p>进入这个仓库</p>
<div class="jb51code"><pre class="brush:bash;">$ cd electron-quick-start</pre></div>
<p>安装依赖</p>
<div class="jb51code"><pre class="brush:bash;">$ npm install</pre></div>
<p>方法五：手动创建（有兴趣的自己去bilibili上搜索视频，有很多这类视屏的讲解）</p>
<h2>三、运行</h2>
<p>使用命令行：</p>
<div class="jb51code"><pre class="brush:bash;">npm start</pre></div>
<p>如果是手动创建的使用</p>
<div class="jb51code"><pre class="brush:bash;">electron . //点是当前项目默认运行文件</pre></div>
<p>截图如下（这是github远程仓库示例）：</p>
<p style="text-align:center"><img alt="在这里插入图片描述" src="https://img.jbzj.com/file_images/article/202212/2022122315494723.png" /></p>
<p>如上图所示我这里简单搭建和运行一个桌面应用程序成功！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>electron渲染进程主进程相互传值示例解析</li><li>electron-vue中报错Cannot use import statement outside a module的解决方案(亲测有效!)</li><li>electron创建新窗口模态框并实现主进程传值给子进程</li><li>Electron+React应用打包全流程</li><li>vue基于electron构建第一个程序</li><li>Electron调用外接摄像头并拍照上传实现详解</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]