电子与Vue.js，不使用样板

Question

不使用electron-vue之类的已有样板，我想使用Vue.js设置Electron应用程序。专门针对初学者的操作步骤是什么？

到目前为止，我已经使用NPM在全球范围内安装了vue cli，使用vue create创建了我的项目，然后使用npm install electron将电子安装到了其中。

从这里开始，一切都崩溃了。 article I was following指定使用dev运行应用程序，运行"NODE_ENV=DEV vue-cli-service serve & sleep 5 && NODE_ENV=DEV electron app.js"。无论出于什么原因，这都不起作用。对文章的评论似乎表明这些命令是linux格式的，但是没有人提供Windows格式的等效命令。

electron .按预期方式启动应用程序，但是vue组件不起作用。将基本的<script src=">标签添加到index.html顶部的vue CDN可以使它工作，但是理想情况下，我希望电子应用程序可以离线工作，我认为这是使用的重点vue-cli，而不是仅从CDN导入它。

有没有简单的方法可以做到这一点？还是我会更好，只是手动下载vue，将其放入电子应用程序的文件夹中，并使用脚本标签加载它？

Answer 1

如果vue-cli-sevice和electron的所有PATH变量都正确，则此方法在Windows Powershell中有效：

set NODE_ENV=DEV ; vue serve ; timeout 5 ; electron app.js

请注意，新版本的vue更改了一些命令：

https://cli.vuejs.org/guide/installation.html

Windows命令帮助：

Setting and getting Windows environment variables from the command prompt?

How do I run two commands in one line in Windows CMD?

---

最终解决此问题的方法是将相对路径更改为绝对路径。

这也很有用：https://nklayman.github.io/vue-cli-plugin-electron-builder/

Answer 2

使用vue.js作为前端框架创建电子应用程序的最简单方法：

1. 安装vue-cli 3：

npm install -g @vue/cli

1. 创建一个项目（请耐心等待，因为这可能需要一段时间）：

vue create myproject

cd myproject

1. 添加并调用vue-cli-plugin-electron-builder的生成器（它将自动为您设置电子，并让您检查更改的文件）：

vue add electron-builder

1. 测试您的应用：

npm run electron:serve

或构建您的应用程序：

npm run electron:build

请参阅本指南的更多内容：https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server