DR：在"万能JavaScript"的新兴世界，开发者现在可以用JavaScript编写桌面应用程序，这不再是一个令人激动的事实。自从大约5年前Electron的首次发布以来，web开发人员已经被授权使用web技术来开发作为本机桌面应用程序运行的应用程序。Electron的许多优点之一是可以使用任何JavaScript框架来构建桌面应用程序的接口。在本文中，您将了解它的易用性Vue.js版为电子应用程序构建接口。如果需要，可以使用此GitHub存储库作为参考。"想知道怎么用吗Vue.js版和Electron一起开发桌面应用程序？看看这篇文章。"在推特上留言先决条件为了能够按照本文中的说明进行操作，您需要：Vue基本知识；电子基础知识；两者兼而有之节点.js在你的系统上安装了NPM。除此之外，您还需要Vue CLI 3。要安装它，可以打开终端并发出以下命令：npm安装-g@vue/cli你要建造什么学习如何使用电子和Vue.js版一起创建现代桌面应用程序，你将建立一个经典的待办事项列表应用程序。这个应用程序将管理待办事项，并允许用户登录，因此整个过程变得更加安全。就像你在现实世界中所做的那样。克隆并运行API这个电子和Vue.js版应用程序需要一个API才能正常工作。由于本文的目标是将重点放在这些技术上，所以您不需要花费时间构建API。相反，您将从GitHub克隆一个。为此，请返回终端，发出以下命令：#克隆APIgit克隆https://github.com/auth0-blog/electron-vue-api.git#进去吧cd电子vue api#安装API依赖项npm安装#运行APInpm启动你可以暂时让这个API继续运行（即，不要关闭终端）。顺便说一下，如果您想了解更多关于如何使用节点.js而Express，你可以查看这个教程，它从无到有地贯穿了整个过程。搭建桌面应用程序Vue.js版还有电子现在您已经正确配置了先决条件，现在可以开始使用客户端应用程序了。要构建桌面应用程序，您将使用一个非常好的开源项目，它使它非常容易使用Vue.js版电子：电子真空。这个项目与其他有用的项目捆绑在一起Vue.js版像Vue路由器和Vuex这样的库。要构建应用程序，您甚至不需要安装此项目。你只需要告诉VUE CLI，你想用它作为你的新应用程序的基础。为此，请打开一个新的终端（您必须让API保持运行，因为您将使桌面应用程序与之交互），然后发出以下命令：vue init simulatedgreg/electron vue to do桌面运行此命令将引导您完成交互式安装过程，该过程将询问您一组问题。在下面，您可以找到您应该为此提供的问题和相应的答案：应用程序名称（待办事项桌面）应用程序Id（按Enter键接受默认值）应用程序版本（按Enter键接受默认值）项目描述（按Enter键接受默认值）使用Sass/Scss？（n）选择要安装的Vue插件（默认情况下选择所有插件，按Enter键同意）使用绒毛和ESLint？（Y:是的，我们将使用ESLint来确保代码质量。按enter键也接受标准版本）用Karma+Mocha设置单元测试？（n）使用Spectron+Mocha建立端到端测试？（n）您要使用什么生成工具？（电子制造商）作者：（按Enter键接受默认值）在回答了安装过程中的所有问题后，一个新的electron vue项目将为您搭建起来。接下来，您可以将终端移动到新项目中，并更新应用程序将使用的电子版本：#进入新项目cd待办桌面#删除旧版本的电子npm-rm电子#安装新版本npm i-D电子除了替换新项目上的Electron版本外，最后两个命令还将在开发环境中安装所有其他依赖项。因此，在运行它们之后，可以发出npm run dev命令，npm将使用Electron打开新的应用程序。正如你所见，有些事情是不对的。问题是Vue.js版用于构建应用程序的模板尚未准备好用于Electron 6。要修复此问题，需要打开.electron vue/webpack.renderer.config.js并更新如下：//找到rendereconfig变量让renderConfig={//然后，找到plugins属性插件：[//然后，替换对HtmlWebpackPlugin构造函数的调用新建HtmlWebpackPlugin({文件名：'索引.html',模板：路径.解析（\u目录名，'../src/索引.ejs'),缩小：{collapseWhitespace:真，removeAttributes:真，removeComments:真},isBrowser:错误，开发：进程.env.NODE_env!=='生产'，节点模块：进程.env.NODE_env!=='生产'? 路径.解析（\uu dirname，'../node\u modules'）：错误}),]}正如您在上面的注释中看到的，您在这个文件中不会有太大的更改。您所要做的就是硬编码isBrowser，将其设置为false，然后定义isDevelopment依赖于进程.env.NODE_env价值观。注意：更新此文件时要格外小心。除了将这两个属性添加到传递给HtmlWebpackPlugin的对象之外，您不必删除或更改任何其他内容。完成后，您必须打开/src/索引.ejs文件并将元素的内容替换为：