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

10,512 阅读3分钟

最近有后台管理系统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 服务也会随之被杀掉,异常处理要做好