Как заставить Vue.js и Electron работать вместе

Введение

На волне популярности (надеюсь, что они популярны) Vue.js и Electron, возникает резонный вопрос, а как заставить их работать вместе. В этом небольшом руководстве я расскажу, как быстро установить и настроить шаблон для разработки приложений на Electron и Vue.js. И так приступим.

Что нам понадобится

• yarn — пакетный менеджер, аналог npm. Я выбрал yarn, потому что мне просто нравится этот инструмент, однако вы можете использовать и npm. Как установить yarn здеся, а npm тута;
• vue-cli — консольная утилита, которая позволяет быстро инициализировать проекты на Vue.js, добавив поддержку webpack;
• electron-vue — шаблон, который мы и будем использовать.

Установка

Запустим наш терминал и введём команду, чтобы установить vue-cli:

yarn global add vue-cli

Аналогично для npm:

npm install vue-cli -g

Затем создадим проект:

vue init simulatedgreg/electron-vue <имя_папки>

Вместо <имя_папки> пшием название папки, в которую хотим поместить все файлы для работы.

Во время установки нам будут заданы следующие вопросы:

• ? Application name: имя проекта.
• ? Project description: описание проекта.
• ? Select which Vue plugins to install: выбираем плагин, который хотим установить;
• ? Use linting with ESLint: будете ли вы использовать ESLint (линтер или дичь, которая будет проверять ваш JS код на соответсвие стайл-гайду).
• ? Setup up unit testing with Karma + Mocha: установить тесты Karma и Mocha.
• ? Setup up end-to-end testing with Spectron + Mocha: установить Spectron и Mocha для end-to-end тестирования.
• ? What build tool would you like to use: какой сборщик изволите electron-builder или electron-packager; я советую electron-builder, так как с ним проблем меньше.
• ? author: ваше имя.

После того, как ответили на вопросы, переходим в нашу директорию и устанавливаем необходимые пакеты:

cd <имя_папки>
yarn

Для npm:

cd <имя_папки>
npm install

И, чтобы проверить работоспособность всего установленного, запустим приложение:

yarn dev

Или:

npm run dev

И мы должны увидеть следующее:

А что дальше то?

Дальше разберём основные папки, которые есть в нашей рабочей директории:

• .electron-vue: все конфиги для работы webpack;
• build: когда вы собирёте ваш проект, то здесь вы найдёте все файлы, которые получились после сборки (установщик, распакованная версия); также здесь есть папка icons, в которой необходимо поместить иконки приложения для разных ОС;
• dist: в режиме разработки из этой папки запускается приложение, поэтому её трогать не имеет смысла;
• src: весь исходный код вашего приложения:
  
  • main: файлы для работы с Main process в Electron;
  • assets: картинки и пр. медиа;
  • components: место хранения всех Vue-компонентов;
  • router: файлы для vue-router;
  • store: файлы для vuex;

Сборка

Чтобы собрать ваше приложение, введите:

yarn build

Или:

npm run build

Результат появится в папке build. Настройки для electron-builder находятся в package.json в разделе build.

Заключение

Теперь у вас есть отличное рабочее окружение, и если вы хотите узнать больше, то вот официальная документация: тут.