Электрон с Vue.js, не используя шаблон

Question

Не используя уже существующий шаблон, такой как electronic-vue , я бы хотел установить приложение Electron с Vue.js.Как это сделать, особенно для новичка ?

. До сих пор я установил vue cli глобально с NPM, создал свой проект с vue create, затем установил в него электронс npm install electron.

Отсюда все разрушается.Статья , за которой я следовал , определяет запуск приложения с помощью dev, который запускается: "NODE_ENV=DEV vue-cli-service serve & sleep 5 && NODE_ENV=DEV electron app.js".По какой-то причине это не работает.Комментарии к статье, похоже, предполагают, что эти команды отформатированы в linux, но никто не предоставил эквивалент в формате Windows.

electron . запускает приложение, как и ожидалось, но компоненты vue просто не работают.Добавление базового тега <script src="> в vue CDN в верхней части index.html работает и заставляет его работать, но в идеале я бы хотел, чтобы приложение electronic работало в автономном режиме, что, как мне кажется, было целью использования vue-cli, а не просто импортировать его из CDN.

Есть ли простой способ сделать это?или мне лучше просто скачать vue вручную, выбросить его в папку в электронном приложении и загрузить тегом script?

Answer 1

самый простой способ создания приложения Electron с vue.js в качестве инфраструктуры веб-интерфейса:

1. install vue-cli 3 ：

npm install -g @vue/cli

создать проект (наберитесь терпения, потому что это может занять некоторое время):

vue create myproject

cd myproject

добавить и вызвать генератор vue-cli-plugin-electronic-builder (он автоматически настроит для вас электрон и позволит вам проверить измененные файлы):

vue add electron-builder

протестируйте приложение:

npm run electron:serve

или создайте приложение:

npm run electron:build

Подробнее в этом руководстве: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server

Answer 2

Это работает в Windows Powershell, если все переменные PATH для vue-cli-sevice и electron верны:

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

Обратите внимание, что новая версия vue изменила некоторые команды:

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

Справка по командам Windows:

Установка и получение переменных среды Windows из командной строки?

Как запустить две команды в одной строке в Windows CMD?

---

В итоге проблема была решена путем изменения относительных путей на абсолютные.

Также это было полезно:https://nklayman.github.io/vue-cli-plugin-electron-builder/