一、环境搭建教程1：在原有 Vue 项目上添加 Electron
1，Electron 介绍
（1）Electron 是由 Github 开发，用 HTML、CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。
- Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac、Windows 和 Linux 系统下的应用来实现这一目的。
- 简单来说，Electron 相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，这样就可以把网页打包成一个在桌面运行的程序。
（2）官网地址：https://electronjs.org/
2，搭建 Vue 开发环境
（1）Vue.js 作为目前最热门的前端开发框架，本文演示如何搭建一个 Vue + Electron 开发环境。首先是搭建 Vue 开发环境，这里使用脚手架工具 vue-cli，具体步骤参考我之前写的文章：
- Vue.js - 使用vue-cli搭建项目（附：详细操作步骤）
（2）Vue 项目创建完毕后，执行 npm run dev 命令可以启动项目，使用浏览器能够访问到如下页面即表示构建成功：
（3）然后执行 npm run build 命令可对项目进行打包，打包完成后，项目中会生成 dist 文件夹。
3，安装 Electron 依赖包
（1）由于网络问题，使用 npm 安装 Electron 会比较慢，甚至完全没有进度（一直卡在 postinstall）。这里我改用 cnpm，首先执行如下命令安装 cnpm：
1 | npm install -g cnpm --registry=https://registry.npm.taobao.org
|
（2）安装后执行 cnpm -v 查看是否安装成功：
（3）接着进入 Vue 项目文件夹执行如下命令安装 Electron 依赖：
1 | cnpm install --save-dev electron
|
（4）接着还需要执行如下命令安装 electron-builder，这个是用来将项目打包成可执行程序以及安装包：
1 | cnpm install --save-dev electron-builder
|
（5）安装后查看项目的 package.json 文件，可以看到这个两个依赖都已添加：
4，配置 Vue 项目
（1）首先在 Vue 项目根目录下创建一个 main.js 文件，它是 Electron 主程序入口，具体内容如下：
/* jshint esversion: 6 */
const electron = require('electron');
// Module to control application life.
const app = electron.app;
// Module to create native browser window.
const BrowserWindow = electron.BrowserWindow;
// const newWindowBtn = document.getElementById('frameless-window')
const path = require('path');
const url = require('url');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function createWindow() {
// 创建一个窗口，大小 800 * 600
mainWindow = new BrowserWindow({
width: 800,
height: 600
});
// 在窗口内要展示的内容为 ./dist/index.html，即打包生成的index.html
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, './dist', 'index.html'),
protocol: 'file:',
slashes: true
}));
// 自动打开调试台
mainWindow.webContents.openDevTools({
detach: true
});
// Open the DevTools.
// mainWindow.webContents.openDevTools()
// Emitted when the window is closed.
mainWindow.on('closed', function () {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
// 回收BrowserWindow对象
mainWindow = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
|
（2）接着编辑 Vue 项目的 package.json 文件，添加如下高亮内容：
- 第 7 行：指明主文件入口（即上面添加的 main.js 文件）
- 第 8~21 行：打包成可执行程序以及安装包的相关配置，注意里面 files 节点配置了哪些文件需要打包到应用中，主要是 dist 文件夹下内容以及项目根目录下的 main.js（如果没这个配置会造成打开应用是显示空白的问题。）
- 第 29~31 行：在原来 vue 相关命令的基础上，增加了electron 程序运行、打包命令。
{
"name": "vue_project",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "",
"private": true,
"main": "main.js",
"build": {
"appId": "com.hangge.demo",
"copyright": "Copyright © 2019 hangge.com",
"nsis": {
"oneClick": true,
"perMachine": true,
"runAfterFinish": true
},
"files": [
"dist/static",
"dist/*.html",
"*.js"
]
},
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"build": "node build/build.js",
"start": "electron .",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
......
|
5，运行桌面应用
（1）在项目文件夹下依次执行如下命令，进行编译并运行：
npm run build
npm run start
|
（2）可以看到我们的桌面应用运行起来了：
6，生成可执行程序
（1）在项目文件夹下依次执行如下命令，进行编译并打包：
npm run build
npm run pack
|
（2）由于我使用的是 macOS 系统，那么打包完毕后就会在项目 dist/mac 文件夹下就会生成可执行程序，双击即可执行（如果是 windows 系统则会生成 exe 程序）：
7，生成安装包
（1）在项目文件夹下依次执行如下命令，进行编译并打包：
npm run build
npm run dist
|
（2）命令执行完毕后除了跟上面一样会生成可执行程序外，还会生成一个安装文件（macOS 系统是 dmg，windows 系统是 exe）
（3）双击它即可进行安装：
