Electron+vue-cli3开发跨平台桌⾯应⽤
⼀步⼀步搭建Electron+vue-cli3开发平台（亲测有效）
Electron是⼀个基于Chromium和 Node.js，可以使⽤ HTML、CSS和JavaScript构建跨平台应⽤的技术框架，兼容 Mac、Windows 和 Linux。虽然B/S是⽬前开发的主流，但是C/S仍然有很⼤的市场需求。受限于浏览器的沙盒限制
[^沙盒（英语：sandbox，⼜译为沙箱），计算机专业术语，在计算机安全领域中是⼀种安全机制，为运⾏中的程序提供的隔离环境。通常是作为⼀些来源不可信、具破坏⼒或⽆法判定程序意图的程序提供实验之⽤。]
⽹页应⽤⽆法满⾜某些场景下的使⽤需求，⽽桌⾯应⽤可以读写本地⽂件、调⽤更多系统资源，再加上Web开发的低成本、⾼效率的优势，这种⽅式越来越受到开发者的喜爱。
这篇博客⼀步⼀步教你如何使⽤Electron和vue-cli3，在完全保留vue开发web应⽤的习惯下，搭建桌⾯应⽤。
这篇博客不涉及Electron和vue的开发教程，仅以实现两者结合为⽬的，若要深⼊学习Electron和vue，请访问官⽅：
学习该框架之前，希望读者需要提前掌握以下技能：
HTML、CSS、JavaScript Vue2.x Stylus
1.创建项⽬
1.1 安装Nodejs
1.2 使⽤cnpm加速下载
npm有时下载速度很慢，可以安装cnpm，从国内淘宝镜像下载，执⾏以下命令：
$ npm install -g cnpm --registry=registry.
之后所有的npm命令都可以直接替换成cnpm使⽤了。
1.3 为什么不使⽤electron-vue搭建呢
由于SimulatedGREG/electron-vue已经很久没有更新了，⽽且其⽣成的⼯程结构并不是vue-cli3。所以放弃使⽤。
1.4 安装/升级vue-cli3
先执⾏以下命令，确认下本地安装的vue-cli版本（如果⾃⼰的电脑没有安装过vue，跳过前两步到第三步吧！）：
$ vue -V或$ vue --version
在写本篇博客时，我的vue是2.9.6版本。
如果本地使⽤的是vue-cli2.x或者更早版本，可先执⾏下⾯命令全局卸载：
$ cnpm uninstall vue-cli -g
（1）vue-cli3使⽤了新的npm包名，与旧版本不⼀样。
（2）在vue2.9.6下执⾏上⾯命令，控制台输⼊vue -V仍然有输出，解决⽅法：
a. 当然, 卸载命令还是要执⾏的: 全局卸载：npm uninstall vue-cli -g;
b. npmrc⽂件删除掉
c. 检索删除vue-cli⽂件夹
再试试: vue -V，就不显⽰版本号了。
（3）可以忽略上述问题，直接安装最新版本的vue-cli3即可（亲测有效）。
执⾏以下命令全局安装vue-cli3：
$ cnpm install @vue/cli -g
执⾏以下命令升级vue-cli3：
$ cnpm update @vue/cli -g
1.5 创建vue项⽬
在指定⽬录下，打开终端，执⾏以下命令，创建vue项⽬：
$ vue create electron-vue-demo
这⾥的项⽬名称为electron-vue-demo（不能出现⼤写字母），可根据⾃⼰的具体项⽬改变。
创建命令执⾏后，在完成创建之前，会出现以下选项（如果熟悉此步骤可跳过本节内容）：
Vue CLI v4.4.6
Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features
选择 Manually select features （⾃定义安装）。
Check the features needed for your project: (Press <space> to select, <a> to toggle all,
<i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
这⾥选择了常⽤的模块，请根据实际需求进⾏选择。
Use history mode for router
(Requires proper server setup for index fallback in production) (Y/n)n
如果选择了router，这⾥会询问是否使⽤history模式。
这⾥我们选择n。
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
> Stylus
选择CSS预处理模块，这⾥我们使⽤Stylus。
Pick a linter / formatter config: (Use arrow keys)
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
选择ESLint代码格式检查⼯具的配置，选择ESLint + Standard config，标准配置。
Pick additional lint features:
(Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
Line on save表⽰在保存代码的时候，进⾏格式检查。
Lint and fix on commit表⽰在$ git commit的时候⾃动纠正格式。
这⾥只选择Lint on save。
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.
In dedicated config files
> In package.json
这⾥问把 babel，postcss，eslint 这些配置⽂件放哪？
In dedicated config files表⽰独⽴⽂件。
In package.json表⽰放在package.json⾥。
这⾥选择In package.json。
Save this as a preset for future projects (y/N) N
是否为以后的项⽬保留这些设置？选择N。
然后耐⼼等待项⽬安装完成。
1.6 ⾃动安装Electron
执⾏以下命令，进⼊项⽬⽬录：
$ cd electron-vue-demo
然后执⾏以下命令：
$ vue add electron-builder
electron-builder是⼀个简单⼜强⼤的库。解决了打包这个棘⼿的问题，⽽且可以应对⼤部分的打包需求。
接下来出现配置选项：
Choose Electron Version (Use arrow keys)
^7.0.0
^8.0.0
> ^9.0.0
选择Electron版本，我写这篇博客的时候，选项是上⾯3个版本，选择最新的即可。
然后耐⼼等待安装完成。
1.7 ⼿动安装Electron
修改package.json，添加以下7⾏：
...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"electron:build": "vue-cli-service electron:build", // add
"electron:serve": "vue-cli-service electron:serve", // add
"postinstall": "electron-builder install-app-deps", // add
"postuninstall": "electron-builder install-app-deps" // add
},
"main": "background.js",  // add
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-plugin-router": "~4.4.0",
"@vue/cli-plugin-vuex": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"electron": "^9.0.5",  // add
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-electron-builder": "~2.0.0-rc.3",  // add
"vue-template-compiler": "^2.6.11"
},
...
新建src/background.js
'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import {
createProtocol,
installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = v.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
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 1000,
height: 600,
webPreferences: {
/* deIntegration, leave this alone
See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration      for more info
nodeIntegration: v.ELECTRON_NODE_INTEGRATION
*/
webSecurity: false,
nodeIntegration: true
}
})
if (v.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
win.v.WEBPACK_DEV_SERVER_URL)
if (!v.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
<('closed', () => {
win = null
})
}
// Quit when all windows are closed.
<('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()
}
})
<('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.
<('ready', async () => {
if (isDevelopment && !v.IS_TEST) {
// Install Vue Devtools
try {
await installVueDevtools()
} catch (e) {
<('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
<('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
<('SIGTERM', () => {
app.quit()
})
}
}
以上代码是1.6⼩节使⽤⾃动化⽅式安装后⽣成的。
安装依赖包
在项⽬⽬录下执⾏以下命令，安装全部依赖包：
$ cnpm install
1.8 编译并启动APP
执⾏以下命令，开始编译APP，并启动开发环境APP：
$ npm run electron:serve或$ yarn electron:serve
⾸次启动可能会等待很久，加载完后会⾃动打开APP，等待即可。
编译成功后，就会出现开发环境的APP了，如下图（Win10启动界⾯）：
当回到控制台，发现控制台的信息：
INFO 
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT
这是因为在请求安装vuejs devtools插件。需要FQ才能安装成功。可以忽略上⾯的问题，耐⼼等待5次请求失败后会⾃动跳过，上⾯的成功界⾯即证实跳过依然编译成功。
依然有解决⽅案：
注释掉src/background.js中的以下代码就⾏了：
/*
if (isDevelopment && !v.IS_TEST) {
// Install Vue Devtools
try {
await installVueDevtools();
} catch (e) {
<("Vue Devtools failed to install:", e.toString());
}
}
*/
2.配置项⽬
2.1 配置ESLint代码格式检查⼯具
ESlint可以⾼效的检查代码格式，让参与项⽬的所有⼯程师都能保持统⼀的代码风格。其检测精度甚⾄可以精确到是否多⼀个空格或者少⼀个空格。代码格式的统⼀对提⾼团队的协同开发效率有很⼤的帮助，特别是对有代码洁癖的⼯程师。
在项⽬根⽬录下创建.eslintrc.js （注意⽂件名前⾯有个.）
请粘贴以下代码：
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'@vue/standard'
],
rules: {
'no-debugger': v.NODE_ENV === 'production' ? 'error' : 'off',
// 不检测语句末尾的分号
'semi': ['off', 'always'],
// 强制缩进为2个空格
'indent': ['error', 2],
// 关闭函数名称跟括号之间的空格检测
'space-before-function-paren': 0,
// 忽略⼤括号内的空格
'object-curly-spacing': 0
},
parserOptions: {
parser: 'babel-eslint'
}
}
这⾥说明下关于indent缩进的配置，要配合项⽬根⽬录下的.editorconfig
electron vue教程[*.{js,jsx,ts,tsx,vue}]
indent_style = space  <--这⾥定义缩进类型是空格还是tab
indent_size = 2        <--这⾥需要与.eslintrc.js的indent对应
trim_trailing_whitespace = true
insert_final_newline = true
.editorconfig ⽤于IDE⾃动格式化代码
.eslintrc.js ⽤于ESlint检测
更多配置可参阅 。
2.2 配置vue
在项⽬⽬录下创建fig.js，粘贴以下代码：
const path = require('path');
function resolve (dir) {
return path.join(__dirname, dir);
}
publicPath: './',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。