关于javascript:ElectronVueelementadmin桌面客户端开箱即用

最近有后盾管理系统 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 

{"": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"[vue]": {"editor.defaultFormatter":"esbenp.prettier-vscode"},"": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "[javascriptreact]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
  "": {"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 服务也会随之被杀掉，异样解决要做好