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

转自：https://www.hangge.com/blog/cache/detail_2668.html

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

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

 

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

1，初始化项目

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

1	vue init simulatedgreg/electron-vue vue_electron_demo

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

 

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

1	npm install

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

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

 

2，运行桌面应用

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

1	npm run dev

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

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

 

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

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

1	npm run build

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

 

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

 

1 2 3 4 5 6 7 8 9 10 11

// 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）双击它即可进行安装：