Electron：使用JavaScript、HTML和CSS等Web技术创建本机应用程序的框架Vue.js：用于Web前端构建用户界面的渐进式框架Vuetify：Vue.js看了上面的介绍，我也明白了这篇文章要做的事情：使用Vue.js和Vuetify组件创建基于Electron的原生桌面应用。环境准备VisualStudioCodeNode.jsYarnVueCLI创建Vue.js应用添加Vuetify组件添加Electron构建和发布Electron应用参考结论环境准备VisualStudioCode推荐VSCode编辑代码，下载链接：https://code.visualstudio.com/.同时可以安装以下扩展：ESLint：代码检查Prettier-Codeformatter：代码格式化Vetur：Vue代码工具Vue2Snippets：Vue代码提示（可选）查看VSCode版本：$code-v1.46.1cd9ea6488829f560dc949a8b2fb789f3cdc05f5dx64Node.jsNode。js开发环境，下载地址：https://nodejs.org/en/download/。建议选择LatestLTSVersion，因为Electronv9仍然使用Node.jsv12。检查Node，NPM版本：$node-vv12.18.1$npm-v6.14.5YarnYarn包管理工具，与NPM相比：Fast,Reliable,Secure。GitHub:https://github.com/yarnpkg/yarn全局安装Yarn:npmconfigsetregistryhttps://registry.npm.taobao.orgnpminstall-gyarn查看Yarn版本:$yarn-v1.22.4VueCLIVueCLI是Vue.js开发的标准工具。GitHub:https://github.com/vuejs/vue-cli全局安装VueCLI:yarnglobaladd@vue/cli查看VueCLI版本:$vue-V@vue/cli4.4.6创建Vue.js应用vuecreatemy-app按照指南进行工程配置，如下：VueCLIv4.4.6?请选择一个预设：手动选择功能？检查项目所需的功能：Babel、TS、Router、Vuex、Linter？使用类风格的组件语法?是的？将Babel与TypeScript一起使用（现代模式、自动检测的polyfills、转译JSX需要）？是的？路由器使用历史记录模式？（需要为生产中的索引回退设置适当的服务器）是吗？选择一个linter/格式化程序配置：更漂亮？选择其他lint功能：Lintonsave？您更喜欢将Babel、ESLint等的配置放在哪里？在专用配置文件中？将其保存为未来项目的预设？不？选择安装依赖项时要使用的包管理器：Yarn~/.vuerc将保存一些可重用的预设：$cat~/.vuerc{"useTaobaoRegistry":true,"packageManager":"yarn"}运行应用程序：cdmy-appyarn服务浏览器打开http://localhost:8080/:添加Vuetify组件Vuetify是Vue.js的MaterialDesign组件库，其他的如Element也可以使用。GitHub:https://github.com/vuetifyjs/...添加Vuetify:cdmy-appvueaddvuetifypreset选择Default:?选择预设：默认（推荐）添加后，编辑tsconfig.json:{"compilerOptions":{..."types":[-"webpack-env"+"webpack-env",+"vuetify"],...},...}运行应用程序：yarnservebrowser打开http://localhost:8080/：编辑tsconfig.json以修复/Users/John/Codes/ikuokuo/start-electron/中的以下错误ERRORmy-app/src/plugins/vuetify.ts(2,21):2:21找不到模块“vuetify/lib”的声明文件。'/Users/John/Codes/ikuokuo/start-electron/my-app/node_modules/vuetify/lib/index.js'隐式具有'any'类型。尝试“npminstall@types/vuetify”（如果存在）或添加一个包含“declaremodule'vuetify/lib';”的新声明（.d.ts）文件；1|从“vue”导入Vue；>2|从“vuetify/lib”导入Vuetify；|^3|4|Vue.use(Vuetify);5|AddElectronbuild如果你能建一个网站，你就可以建一个桌面应用。Electron负责将Web构建到本地桌面应用程序中。要将Vue.js应用程序构建到Electron应用程序中，您现在可以使用VueCLI插件ElectronBuilder。首先指定节点版本：yarnadd@types/node@12--dev之后添加ElectronBuilder：cdmy-appvueaddelectron-builderElectronversionselection9.0.0:?选择ElectronVersion^9.0.0添加后，编辑src/router/index.ts:...constrouter=newVueRouter({-mode:"history",+mode:process.env.IS_ELECTRON?"hash":"history",base:process.env.BASE_URL,routes});导出默认路由器；运行应用程序：yarnelectron:serve现在是一个桌面窗口：命令在package.json中定义：{..."scripts":{"serve":"vue-cli-serviceserve","build":"vue-cli-servicebuild","lint":"vue-cli-servicelint","electron:build":"vue-cli-serviceelectron:build","electron:serve":"vue-cli-serviceelectron:serve","postinstall":"electron-builderinstall-app-deps","postuninstall":"electron-builderinstall-app-deps"},...}yarnexecution就这样，如下：$yarnlintyarn运行v1.22.4$vue-cli-servicelint完成没有发现lint错误！?Donein3.17s.yarnadd@types/node@12--dev是为了更正/Users/John/Codes/ikuokuo/start-electr中的以下错误ERRORon/my-app/node_modules/electron/electron.d.ts(1659,31):1659:31无法扩展接口“NodeJS.EventEmitter”。你是说'implements'吗？...Editsrc/router/index.tsistofixthefollowingwarningWARNItisdetectedthatyouareusingVueRouter.如果你使用历史模式，你必须在加载根组件时推送默认路由。了解更多请访问https://goo.gl/GM1xZG发布Electron应用程序Vue应用了ElectronBuilder插件，因此您可以直接使用此工具GitHub：https://github.com/electron-u...yarnelectron:build编译发布：#淘宝镜像，国内下载Electron更快exportELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"#macOS下禁用签名。签名见上次参考exportCSC_IDENTITY_AUTO_DISCOVERY=falsecdmy-appyarnelectron:builddist_electron/是发布的内容。例如，在macOS上可以看到打包好的dmg：双击dmg进行尝试或安装：修改发布格式或内容，参见ElectronBuilder文档：https://www.electron.build/。exportCSC_IDENTITY_AUTO_DISCOVERY=false是为了避免如下错误...?signingfile=dist_electron/mac/my-app.appidentityName=gdb_codesignidentityHash=BC899AF362F80B3FDB39F966A1601E2AFAFA100BprovisioningProfile=none(node:10223)UnhandledPromisecoderejectionBC899AF362F80B3FDB39F966A1601E2AFAFA100B--force--timestamp--optionsruntime--entitlements/Users/John/Workspace/Codes/start-electron/my-app/node_modules/app-builder-lib/templates/entitlements.mac.plist/Users/John/Workspace/Codes/start-electron/my-app/dist_electron/mac/my-app.app/Contents/Frameworks/ElectronFramework.framework/Versions/A/Helpers/chrome_crashpad_handlererror:在钥匙串中找不到指定的项目....（节点：10223）UnhandledPromiseRejectionWarning：未处理的承诺拒绝。这个错误要么是在没有catch块的情况下在异步函数中抛出，要么是因为拒绝了一个没有用.c处理的承诺抓取（）。要在未处理的promise拒绝时终止节点进程，请使用CLI标志`--unhandled-rejections=strict`（参见https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode）。（拒绝ID：1）（节点：10223）[DEP0018]DeprecationWarning：未处理的承诺拒绝已弃用。将来，未处理的承诺拒绝将以非零退出代码终止Node.js进程。参考electron-appstart-electronElectronApplicationDistributionElectronBuilderCodeSigningNotarizeappformacOSEpilogueGocoding！分享编码方面的实用技巧和知识！欢迎关注，共同成长！
