[Из песочницы] Как заставить 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.
Заключение
Теперь у вас есть отличное рабочее окружение, и если вы хотите узнать больше, то вот официальная документация: тут.
