Более простой способ создания электронных приложений с vue с помощью vue-cli 3.
Существует довольно много руководств по использованию Vue.js и Electron, но все они, похоже, требуют огромных усилий и создания бойлера, чтобы начать работу.
В vue-cli 3 потребность в генерации котла была значительно уменьшена, и весь рабочий процесс разработчика стал намного проще. Я сел в гринфилд, как это было бы интегрировать эту более простую установку в Electron, и был приятно удивлен.
Давайте начнем.
Теперь, когда у нас настроены Electron и Vue.js, нам понадобится файл JavaScript, который инициализирует приложение Electron.
Как видите, есть режим разработки, в котором страница загружается с сервера разработки веб-пакетов, и производственная версия, в которой используются статические ресурсы, созданные веб-пакетом.
Во-первых, давайте запустим сервер разработки, добавив скрипт в package.json.
Вы можете настроить команду сна в зависимости от того, сколько времени обычно требуется для запуска веб-пакета в vue-cli-service.
npm run dev
Ваш сайт появится сейчас, и вы получите все полезные свойства среды разработки, которые могут предложить Vue.js и webpack.
Для «производственной» сборки нам нужно немного больше. По умолчанию webpack будет использовать относительные URL-адреса для всех статических ресурсов. Это не годится для Electron, которому вместо этого потребуются полные пути к файлам.
В старом vue-cli 2 дня генераторы котлов выдавали кучу файлов конфигурации типа «получайте удовольствие, поддерживая их!». Сегодня с vue-cli 3 есть программируемый способ изменения webpack config с помощью файла vue.config.js, и это замечательно.
Вот и все. Вы можете довольно легко протестировать эту сборку, просто запустив сборку vue-cli и Electron.
npm run build electron app.js
Теперь вы готовы создать окончательное приложение Electron в любом сборщике, который вы выберете (их примерно полдюжины).
Весь этот код есть и на GitHub. Если у вас есть какие-либо предложения или улучшения, записывайте проблемы или запросы на вытягивание в этом репо.
