electron桌面应用程序搭建及简单运行

泽连斯京

electron:官方文档https://www.electronjs.org/解释了桌面应用的开发好处。

如果你可以建一个网站，你就可以建一个桌面应用程序。 Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。

如上面所提到：会 JavaScript, HTML 和 CSS 就可以开发。我们学习 electron 桌面应用有下面这些优势：

1.减少学习成本。 前端开发者不需要去学习新的开发语言，学习不会花费很多时间；而且，electron学习难度会比其他C#、.net等简单许多,对于许多开发者是友善的。
2.庞大的社区：electron是github官方产品，不管是框架技术、用户使用数量，还是用户信任度，都是得到各界开发人士肯定的。
3.减少工作量： Electron 是跨平台的，可以同时开发 Web 应用和桌面应用，无论是 UI，还是代码（JS），大多数资源都可以共享，这也为开发者大大减少了工作量，甚至企业也无需重复投入人力来开发系统。
4.未来发展市场广阔。从electron的主要用户来看，很多都是大厂，如蚂蚁金服、小米、华为、GitHub（Electron 就是 GitHub 推出的）、微软等，由于现在 GitHub 被微软收购了，因而目前 Electron 的后台是微软。因此学习 Electron 不用担心以后没市场，毕竟，各大厂都在用 Electron

现在来学习一下electron吧！

一、搭建开发环境

官方给出：

Electron 支持Windows 7 及以上版本—任何在低版本Windows上开发Electron的尝试都将是徒劳无功的。

electron 是nodejs提供技术插件支持，首先，为避免一些编译环境不必要的错误，安装nodejs最新版本node下载

再安装git git下载(下面远程拉取官方实例代码需要用到)

二、创建项目

1.安装插件:

cnpm i -g electron
npm i -g electron
yarn electron

选择任意一种安装方式

建议使用

cnpm i -g electron

2.创建项目：

方法一:

npx create-electron-app xxx //其中npx为node最新10版本内置命令

方法二:

cnpm i -g yarn //安装yarn命令
yarn create-electron-app xxx

方法三：

cnpm install -g @electron-forge/cli //安装electron-forge脚手架
electron-forge init xxx //创建、初始化项目
cd xxx //进入xxx项目目录
npm start //运行项目

方法四：远程仓库拉取

克隆示例项目的仓库

$ git clone https://github.com/electron/electron-quick-start

进入这个仓库

$ cd electron-quick-start

安装依赖

$ npm install

方法五：手动创建（有兴趣的自己去bilibili上搜索视频，有很多这类视屏的讲解）

三、运行

使用命令行：

npm start

如果是手动创建的使用

electron . //点是当前项目默认运行文件

截图如下（这是github远程仓库示例）：

如上图所示我这里简单搭建和运行一个桌面应用程序成功！

您可能感兴趣的文章:

• electron渲染进程主进程相互传值示例解析
• electron-vue中报错Cannot use import statement outside a module的解决方案(亲测有效!)
• electron创建新窗口模态框并实现主进程传值给子进程
• Electron+React应用打包全流程
• vue基于electron构建第一个程序
• Electron调用外接摄像头并拍照上传实现详解