使用webpack搭建electron+vue框架

• 技术选型： electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的API，允许使用 Web 前端技术开发跨平台的桌面客户端，这里使用打包工具webpack搭建electron的主进程和渲染进程的脚手架，渲染进程使用vue作为前端框架。
• 示例项目地址：https://github.com/zhangxuelian/electron-vue-frame

一、准备环境

1、安装node

下载地址：https://nodejs.org/en/
安装完成后：cmd命令行，输入

node -v
npm -v

即可查看node和npm的当前安装版本，如下：

2、安装git（不用git管理代码则不必安装）

下载地址： https://git-scm.com/
安装成功后：系统右键菜单可看到 Git Bash Here,选择即可打开git命令终端

二、创建项目

// 创建项目文件夹
mkdir electron-vue-frame
// 进入项目目录
cd electron-vue-frame
// 创建git项目
git init
// 创建git的忽略提交规则文件
touch .gitignore
// 初始化一个项目（一直回车或按自己需要设置）
npm init

三、安装electron和vue

// --save-dev(仅开发环境需要，发布后不依赖的模块)，当前安装的electron版本是：9.1.2
npm install electron --save-dev
// --save(生产环境需要依赖的模块)，当前安装的vue版本是：2.6.11
npm install vue --save

四、搭建脚手架

1、项目结构

|-- electron-vue-frame // 项目名
    |-- .gitignore // git忽略规则文件
    |-- package-lock.json
    |-- package.json
    |-- .electron-vue // electron和vue的脚手架目录
    |   |-- dev.runner.js // 开发环境运行脚本
    |   |-- pack.builder.js // 打包脚本
    |   |-- webpack.main.config.js // webpack主进程配置
    |   |-- webpack.renderer.config.js // webpack渲染进程配置
    |-- src // 源码目录
        |-- index.html // 入口文件模板
        |-- main // 主进程目录
        |   |-- index.js // 主进程
        |-- renderer // 渲染进程目录
            |-- App.scss // 样式文件
            |-- App.vue // vue组件
            |-- main.js // 渲染进程入口文件

2、渲染进程（开发环境）

2.1、安装依赖

// 安装webpack（打包工具）及webpack-dev-server（基于webpack的开发服务及HMR热重载）
npm install --save-dev webpack webpack-dev-server

// 安装vue-loader（vue的转译工具）
// 安装vue-template-compiler（vue的template编译工具）
// 安装vue-style-loader（vue的style转译工具）
// 安装css-loader（vue样式的转译工具，注：亲测4.0.0~4.2.0（当前最新）版本无法处理vue样式）
npm install --save-dev vue-loader vue-template-compiler vue-style-loader [email protected]

// （若使用sass预处理工具则安装，不用则不必安装）
npm install --save-dev node-sass sass-loader

// 安装url-loader（url-loader将图片转化为base编码，图片过大则自动使用file-loader）
// 安装file-loader（指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存）
npm install --save-dev url-loader file-loader

// 安装html-webpack-plugin（可根据模板生成html文件，并依赖打包后的文件）
npm install --save-dev html-webpack-plugin

2.2、开发web前端项目（渲染进程模块）

• 文件目录：./src/renderer
• demo参考： https://github.com/zhangxuelian/electron-vue-frame/tree/master/src/renderer
• 这里是前端项目源码。

2.3、渲染进程打包配置

• 文件目录：./.electron-vue/webpack.renderer.config.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/webpack.renderer.config.js
• 该配置主要将渲染进程的vue文件进行转译打包，详情可查看demo,有注释说明。

3、主进程（开发环境）

3.1、安装依赖

npm install --save-dev electron

3.2、开发终端业务（主进程模块）

• 文件目录：./src/main
• demo参考：https://github.com/zhangxuelian/electron-vue-frame/tree/master/src/main
• 配置说明：这里是终端业务源码，主要是控制终端的窗口进程。

3.3、主进程打包配置

• 文件目录：.electron-vue/webpack.main.config.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/webpack.main.config.js
• 配置说明：该配置主要将主进程源码进行打包配置，详情可查看demo,有注释说明。

4、执行打包主进程和渲染并在开发环境下运行终端（热重载）

• 文件目录：.electron-vue/dev.runner.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/dev.runner.js
• 配置说明：该配置将主进程和渲染进程进行打包，创建web服务并监听重载，执行启动终端；
• 在package.json里加入执行脚本：node .electron-vue/dev.runner.js，如下所示：
  
• 执行命令，即可在开发环境下运行终端，实时查看前端项目结果：

npm run dev

5、构建打包（生产环境）

5.1、安装依赖

// 安装文件删除工具
npm install --save-dev del
// 安装electron打包工具
npm install --save-dev electron-builder

5.2、打包配置

• 文件目录：.electron-vue/pack.builder.js
• 具体配置：https://github.com/zhangxuelian/electron-vue-frame/blob/master/.electron-vue/pack.builder.js
• 配置说明：该配置将主进程和渲染进程一起打包，electron-builder会根据package.json里的main对象找到webpack输出的文件进行打包（生产环境下，主进程的webpack配置node的__dirname必须为false，否则加载不到对应渲染进程入口文件）；
• 在package.json里加入执行脚本和electron-builder的配置，如下所示：
• 执行命令，即可打包到在build文件夹下：

npm run build

6、相关扩展

以上仅为基础框架搭建，相关功能扩展，请查看相关文档：

• electron文档：https://www.electronjs.org/docs
• webpack文档：https://webpack.js.org/guides/
• vue文档：https://cn.vuejs.org/v2/guide/
• electron-builder文档：https://www.electron.build/
• vue-loader文档：https://vue-loader.vuejs.org/
• webpack相关loader：https://www.webpackjs.com/loaders/
• webpack相关plugin：https://www.webpackjs.com/plugins/