vue + electron 快速入门
什么是 Electron？
Electron 官网只有一句简单的话： 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。简单点讲，就是有了 Electron，我们就可以用前端技术来写 web 页面，它可以转化为一个桌面应用。
除此之前，Electron 还有其他的一些特性：
-
基于 Chromium 和 Node.js
-
兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序
Electron 快速上手
先来一个helloword
初始化工程
创建 Electron 工程方式与前端项目别无二致，创建一个目录，然后用 npm 初始化：
mkdir hello-electron && cd hello-electron
npm init -y
安装依赖
npm install --save-dev electron
可能下载会报错，我是使用了cnpm
创建 HTML
在 Electron 中，每个窗口都可以加载本地或者远程 URL，这里我们先创建一个本地的 HTML 文件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> </body> </html>
创建入口文件
类似于 Node.js 启动服务，Electron 启动也需要一个入口文件，这里我们创建 index.js 文件。在这个入口文件里，需要去加载上面创建的 HTML 文件，那么如何加载呢？ Electron 提供了两个模块：
-
app模块，它控制应用程序的事件生命周期。 -
BrowserWindow模块，它创建和管理应用程序 窗口。
入口文件是 Node.js 环境，所以可以通过 CommonJS 模块规范来导入 Electron 的模块。同时添加一个 createWindow() 方法来将 index.html 加载进一个新的 BrowserWindow 实例。
// index.js const { app, BrowserWindow } = require('electron'); function createWindow () { const win = new BrowserWindow({ width: 800, height: 600 }) win.loadFile('index.html') }
// index.js
app.whenReady().then(() => {
createWindow()
})这样一来就可以通过以下命令打开 Electron 应用程序了！
# 这里会自动去找package.json的main字段对应的文件运行
# 当然 你也可以将命令放进 script 里面
npx electron .
# 注意：后面有一个.要加上
到这里简单的demo就结束了，要看更细化的内容看这个地址：https://mp.weixin.qq.com/s/GlDC-qff5bkOS1UMDEiF8A
------------我是分割线--------------
接下来做vue+electron的例子
1.首先来创建vue项目
这里用的是vue-cli3，如果是低版本请自行升级。
vue create electron-vue-demo
2.自动安装electron
进入到项目根目录，执行：
vue add electron-builder
注意：这里我的node版本低，要升级下node版本。（用的mac）window自行查找资料
// 清除node的cache（清除node的缓存） sudo npm cache clean -f // 安装"n"版本管理工具，管理node（没有错，就是n） sudo npm install -g n // 更新node版本 sudo n stable // 再查一遍本机当前Node node -v
然后再次执行一次 vue add electron-builder，ok完事！
3.新建src/background.js
在刚刚创建的vue项目src目录下新建background.js，复制以下代码：
'use strict' import { app, protocol, BrowserWindow } from 'electron' import { createProtocol, installVueDevtools } from 'vue-cli-plugin-electron-builder/lib' const isDevelopment = process.env.NODE_ENV !== 'production' // 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 win // Scheme must be registered before the app is ready protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]) function createWindow () { // Create the browser window. win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode win.loadURL(process.env.WEBPACK_DEV_SERVER_URL) if (!process.env.IS_TEST) win.webContents.openDevTools() } else { createProtocol('app') // Load the index.html when not in development win.loadURL('app://./index.html') } win.on('closed', () => { win = null }) } // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS 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', () => { // On macOS 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 (win === null) { createWindow() } }) // 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', async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools try { await installVueDevtools() } catch (e) { console.error('Vue Devtools failed to install:', e.toString()) } } createWindow() }) // Exit cleanly on request from parent process in development mode. if (isDevelopment) { if (process.platform === 'win32') { process.on('message', data => { if (data === 'graceful-exit') { app.quit() } }) } else { process.on('SIGTERM', () => { app.quit() }) } }
以上代码是1.5小节使用自动化方式安装后生成的。
4.安装依赖包
在项目根目录执行，安装全部依赖包
cnpm install
5.编译并启动APP
执行以下命令，开始编译APP，并启动开发环境APP：
npm run electron:serve
编译成功后，就会出现开发环境的客户端了。
6. build最终产品
这里我们已经集成了electron-builder工具，官方文档可以参阅：https://www.electron.build/
7.设置APP及安装包图标和设置app名称
修改vue.config.js
chainWebpack: config => {...}, + pluginOptions: { + electronBuilder: { + builderOptions: { + win: { + icon: './public/app.ico' + }, + mac: { + icon: './public/app.png' + }, + productName: 'AppDemo' // 设置名称 + } + } + }
8.打包APP
执行以下命令，可以build工程：
npm run electron:build
最终在dist_electron目录下生成build后的产品。
好了，到这里本文就结束了，后面还会更新electron的相关文章，多学习一些新知识，充实起来，加油！本博客只为记录学习，希望大家共同成长。
同样，有好的知识或者新技术可以共同探讨！
更多细节也可以参考这篇文章：https://zhuanlan.zhihu.com/p/75764907
