Electron+Vue开发环境的搭建教程2（直接使用electron-vue创建项目）

2020-04-02 发布：hangge 阅读：2822

在之前的文章中我介绍了如何在一个已有的 Vue.js 项目上增加 Electron 的支持（点击查看），但这种手动集成 electron 方式不仅不利于工程化开发，配置维护都略显麻烦。

如果我们是一个全新的项目，建议直接使用已经做好集成的模板项目，比如：electron-vue。下面通过样例进行演示。

二、环境搭建教程2：使用 electron-vue 创建项目

1，初始化项目

（1）首先执行如下命令使用 electron-vue 模版创建一个集成了 Vue 以及 Electron 的工程项目，项目名我这里叫做 vue_electron_demo

vue init simulatedgreg/electron-vue vue_electron_demo

（2）在这期间会提示我们输入或选择一些东西，当然干脆一路回车也是可以的。

（3）初始化完毕后，进入项目文件夹，执行如下命令安装依赖：

npm install

（4）最终生成的项目结构如下，其中 src 里分为两个文件夹：

main：放置主进程代码
renderer：放置渲染进程代码（Vue 的所有代码就放置在 renderer 文件夹里）

2，运行桌面应用

（1）在项目文件夹下执行如下命令运行程序：

npm run dev

（2）可以看到我们的桌面应用运行起来了：

注意：这种方式下是支持热部署的，即修改项目代码后会直接反应到界面上，不需要重启项目。

3，生成可执行程序、以及安装程序

（1）执行如下命令对项目进行打包：

npm run build

（2）但由于国内网络问题，可能会有一个安装包（比如 electron-v2.0.18-darwin-x64.zip）下载特别慢，基本下载不下来。

（3）要解决这个问题，我们可以直接改项目中的 /node_modules/electron/install.js 文件，改成使用国内镜像：

// downloads if not cached
download({
  cache: process.env.electron_config_cache,
  version: version,
  platform: process.env.npm_config_platform,
  arch: process.env.npm_config_arch,
  strictSSL: process.env.npm_config_strict_ssl === 'true',
  force: process.env.force_no_cache === 'true',
  quiet: process.env.npm_config_loglevel === 'silent' || process.env.CI,
  mirror: 'https://npm.taobao.org/mirrors/electron/' 
}, extractFile)

（4）重新打包，由于我使用的是 macOS 系统，在项目 build/mac 文件夹下就会生成可执行程序，双击即可执行（如果是 windows 系统则会生成 exe 程序）：

（5）除了生成可执行程序外，还会在 build 文件夹下生成一个安装文件（macOS 系统是 dmg，windows 系统是 exe）

（6）双击它即可进行安装：