开箱即用，Electron+Vue-element-admin桌面客户端

最近有后台管理系统C端的需求，所以根据目前市面上比较好的开源项目组装了一套开箱即用的C端工程

前端部分完全集成了 vue-element-admin
Vue 相关
- Vue：v2.6.11
- Vue Router：v3.4.3
- Vuex：v3.5.1
- element-ui：v2.13.1
客户端及服务端
- electron：v10.1.2
- node：v12.18.2
  - 本机环境的 node 版本，此版本下可以正常开发及打包，仅供参考
构建及调试工具
- electron-builder：v22.4.1
- electron-devtools-installer：v3.0.0
源码地址传送门

依赖安装

使用 npm 或 cnpm 以及镜像方式，依赖包中可能会存在一些问题导致打包失败，见下面的常见问题

npm i
or
npm i --registry https://registry.npm.taobao.org
or 
cnpm i

效果展示

运行开发模式启动命令 npm run dev 或 yarn dev

使用 mock 的方式本地模拟数据，登录成功后进入 Dashboard 页，效果跟线上网站预览版本一致

打包输出

windows 和 macOS 双平台

实用工具

Vue Devtools

开发模式下，在 src/main/index.dev.js 中使用 electron-devtools-installer 安装 vue-devtools ，配置如下：

// Install `vue-devtools`
require('electron').app.on('ready', () => {
  let installExtension = require('electron-devtools-installer');
  installExtension
    .default(installExtension.VUEJS_DEVTOOLS)
    .then(() => {})
    .catch(err => {
    console.log('Unable to install `vue-devtools`: \n', err);
  });
});

代码美化

使用 vscode 推荐插件 prettier ，常用编辑器设置 settings.json

{
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

使用快捷键格式化代码

Windows 　　
Shift + Alt + F

macOS 　　
Shift + Option + F

保存自动格式校验

安装 eslint 相关依赖，此工程中用到了以下依赖，非必须，如果在日常中自己使用可以按需选择

{
  "eslint": "^6.8.0",
  "eslint-config-standard": "^14.1.1",
  "eslint-friendly-formatter": "^4.0.1",
  "eslint-loader": "^4.0.0",
  "eslint-plugin-html": "^6.0.2",
  "eslint-plugin-import": "^2.20.2",
  "eslint-plugin-node": "^11.1.0",
  "eslint-plugin-promise": "^4.2.1",
  "eslint-plugin-standard": "^4.0.1",
  "eslint-plugin-vue": "^6.2.2"
}

eslint 简单配置

module.exports = {
  "root": true,
  "env": {
    "node": true,
    "browser": true,
    "es6": true
  },
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "sourceType": "module",
    "parser": "babel-eslint",
    "allowImportExportEverywhere": true
  },
  "extends": ['plugin:vue/recommended', "eslint:recommended"],
  "plugins": [
    "vue"
  ],
  "rules": {
    "vue/max-attributes-per-line": ["error", {
      "singleline": 100
    }],
    "vue/html-self-closing": "off",
    "vue/singleline-html-element-content-newline": "off",
    "vue/no-v-html": "off",
    "vue/multiline-html-element-content-newline": "off",
    "no-unused-vars": "off",
    "no-async-promise-executor": "off",
    "no-useless-escape": "off",
    "no-prototype-builtins": "off",
    "no-undef": "off"
  }
}

vscode 编辑器设置保存时格式自动校验

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true,
  "source.fixAll": true
}

常见问题

build 失败

build失败，依赖模块 JSV 中 package.json 的 dependencies 字段内容为 [] ，改为 {} ，或者将此字段直接移除即可

镜像配置

打包过程中下载 electron 速度慢，通过配置镜像提高下载速度，工程中已经加入

"build": {
  "electronDownload": {
   "mirror": "https://npm.taobao.org/mirrors/electron/"
 }
}

安装包配置

windows 平台下，安装包重复安装时由于注册表信息冲突导致安装失败，建议在打包配置添加 guid ，可以简单粗暴的解决此问题

"nsis": {
  "oneClick": false,
  "perMachine": false,
  "allowElevation": true,
  "allowToChangeInstallationDirectory": true,
  "runAfterFinish": false,
  "guid": "", // 避免注册表信息冲突
  "deleteAppDataOnUninstall": true
},

总结

本工程重心在于前端， electron 实际只是起到了包装的作用
数据采用 mock ，主要模拟与服务端交互
如果采用本地服务的形式，可以在 electron 启动过程中加入自己的 node 服务，在关闭 electron 进程时， node 服务也会随之被杀掉，异常处理要做好