[Из песочницы] Как заставить Vue.js и Electron работать вместе

tjzseld78ryzmf6-cz2wp69tops.jpeg


Введение

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

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

djug_nclm4hgusoznfvvrhsojlo.png


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

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


  • .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.


Заключение

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

© Habrahabr.ru