Введение

На волне популярности (надеюсь, что они популярны) 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

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

yarn build

npm run build