最近有后台管理系统C端的需求，于是一套开箱即用的C端工程前端基于目前市面上比较好的开源项目组装而成部分完全集成vue-element-adminVue相关Vue:v2.6.11VueRouter:v3.4.3Vuex:v3.5.1element-ui:v2.13.1clientandserverelectron:v10.1.2node:v12.18.2native环境的node版本，在此版本下可以正常开发打包，仅供参考。构建调试工具electron-builder:v22.4.1electron-devtools-installer:v3.0.0源码地址传送门依赖使用npm或cnpm和镜像安装，可能依赖包存在一些问题导致打包失败，看下面的常见问题npmiornpmi--registryhttps://registry.npm.taobao.org或cnpmi效果可以看出，运行开发模式启动命令npmrundev或yarndev使用mock方法在本地模拟数据，登录成功后进入Dashboard页面。效果与在线网站的预览版一致。打包输出Windows和macOS双平台实用程序VueDevtools开发模式，在src/main/index.dev.js中使用electron-devtools-installer安装vue-devtools，配置如下：//Install`vue-devtools`require('electron').app.on('ready',()=>{让installExtension=require('electron-devtools-installer');installExtension.default(installExtension.VUEJS_DEVTOOLS).then(()=>{}).catch(err=>{console.log('无法安装`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"},}使用快捷键格式化代码WindowsShift+Alt+FmacOS 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-插件节点”：“^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}FAQbuildfailed构建失败，依赖模块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服务会相应的被杀死。总是好好处理
