Недавно я взял electron (фреймворк js для создания настольных приложений) и создаю на нем приложение, используя Vuejs и Vuex. Я использую однофайловые компоненты vue для своего приложения, поэтому основными требованиями являются установка и настройка сборщика модулей (webpack) и транспилятора (babel).
Я использую электрон-вебпак. Он предоставляет большинство конфигураций веб-пакетов, необходимых для электронного приложения из коробки. Эти конфигурации могут быть легко изменены или перезаписаны в соответствии с вашими потребностями, плюс у них есть отличная документация. Если вы предпочитаете пойти более прямым путем, эта статья предоставляет полезное руководство (это для React, но логика может быть легко применена для Vue).
Вот разбивка того, как я настроил свою среду разработки.
Настройте структуру файлов вашего проекта.
Electron-webpack ожидает, что ваши основные файлы и файлы процесса рендеринга будут находиться в отдельных каталогах, каждый из которых содержит файл index.js, который будет использоваться в качестве отправной точки пакета веб-пакета. Чтобы быстро настроить структуру проекта в соответствии с общепринятой электронной практикой, клонируйте шаблон из electron-webpack-quick-start.
Установите зависимости package.json
Запустите npm install, чтобы установить зависимости из клонированного шаблона.
Установите Vue, Vuex и Vue-Router
Инициализировать Vue
Инициализируйте vue в файле index.js в каталоге рендерера.
Создайте свой SPA в каталоге рендерера
Продолжайте, как хотите, в каталоге рендерера. Чтобы запустить приложение, запустите npm run dev.
