В этом руководстве мы увидим, как использовать Electron и Vue.js для создания кроссплатформенных настольных приложений для основных операционных систем, таких как Windows, Linux и MAC.
В предыдущей статье мы использовали Angular как основу для структурирования кода нашего приложения. Теперь посмотрим, как использовать вместо этого Vue.js.
Благодаря Электрону вы можете создавать полноценные настольные приложения, используя только веб-технологии. Больше никаких Java или C ++, плюс у вас будет доступ к собственным API-интерфейсам базовой системы, чтобы вы могли интегрировать свое приложение с любой необходимой системной службой.
Множество приложений создается с использованием Electron, вы можете проверить некоторые из них по этой ссылке.
Теперь давайте приступим к созданию нашего демонстрационного настольного приложения с помощью Vue.
Предпосылки
Вы можете с комфортом следовать этому руководству, если у вас есть следующие предпосылки:
- Во-первых, для разработки и построения вашего приложения требуются Node и NPM. Вы можете скачать их оба с официального сайта. Вы также можете использовать менеджер пакетов для установки Node в вашей системе или, еще лучше, использовать nvm для установки и переключения между несколькими версиями,
- Вам также необходимо быть знакомым с JavaScript, HTML и CSS,
- Вам также необходимо иметь практические знания Vue.js.
Представляем Vue.js
Vue.js - это современный JavaScript-фреймворк для создания пользовательских интерфейсов. Он разработан так, чтобы быть прогрессивным и доступным для постепенного внедрения.
Vue имеет дело с уровнем представления вашего приложения, но также предоставляет множество других сторонних библиотек для маршрутизации и управления состоянием.
Вы можете использовать Vue, чтобы добавить немного структурированного кода JavaScript в свое приложение, или вы можете создавать полноценные одностраничные приложения, используя современные функции, такие как однофайловые компоненты и множество вспомогательных библиотек.
Установка Vue CLI
Как мы упоминали ранее, вы можете постепенно использовать Vue.js в своем проекте, что означает, что вы можете начать с одного тега <script>
в своем HTML-документе:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Если вы хотите создавать полноценные SPA, вы можете использовать Vue CLI, который позволяет вам быстро создавать проект Vue и работать с ним без необходимости иметь дело со сложными конфигурациями, такими как Webpack.
Vue CLI имеет следующие особенности:
- Многофункциональность: Vue CLI поддерживает Babel, TypeScript, ESLint, PostCSS, PWA, модульное тестирование и сквозное тестирование.
- Расширяемость: Vue CLI предоставляет систему плагинов, которая позволяет разработчикам создавать и совместно использовать повторно используемый код для решения общих проблем веб-разработки.
- Нет необходимости извлекать: в отличие от create-react-app, Vue CLI полностью настраивается без необходимости извлечения.
- Готовность к будущему: Vue CLI позволяет использовать собственный код ES2015 для современных браузеров.
Вы можете установить Vue CLI из npm, используя следующую команду:
$ npm install -g @vue/cli
На момент написания этой статьи установлена версия @ vue / cli v3.10.0.
Примечание: вам может потребоваться добавить
sudo
перед предыдущей командой для глобальной установки пакетов в Linux или macOS или использовать командную строку с правами администратора в Windows. Вы также можете просто исправить свои разрешения npm. Если вы установили Node и NPM в своей системе с помощью NVM, это будет выполнено автоматически.
Создание проекта Vue
После установки Vue CLI приступим к созданию проекта Vue. Откройте новый терминал и выполните следующую команду:
$ vue create electron-vue
Вам будет предложено выбрать предустановку. Вы можете выбрать либо предустановку по умолчанию, в которой есть Babel и ESlint, либо вы можете выбрать необходимые функции вручную. Давайте выберем последний вариант - Выбрать функции вручную.
Вам будет предложено множество функций, которые вы можете добавить в свой проект. Используйте стрелку, чтобы перейти к функции Маршрутизатор, а затем нажмите пробел, чтобы выбрать ее.
Затем вам будет предложено Использовать режим истории для маршрутизатора? Вы можете сказать n для этого.
Затем вам будет предложено Выбрать конфигурацию линтера / форматтера. Вы можете просто выбрать ESLint только с предотвращением ошибок.
Затем для Выбрать дополнительные функции удаления ворса просто выберите Плотность при сохранении.
Затем вас спросят: Где вы предпочитаете размещать конфигурацию для Babel, PostCSS, ESLint и т. Д.? Выберите In package.json
.
Наконец, вас спросят, хотите ли вы Сохранить это как предварительную настройку для будущих проектов? (Да / Нет) Вы можете сказать Н для этого.
Примечание. Вы можете свободно выбирать функции и параметры конфигурации, которые соответствуют вашим потребностям. Ни одно из вышеперечисленных решений не влияет на то, как вы можете интегрировать Electron с Vue.
Vue CLI создаст проект в проекте electron-vue
, инициализирует репозиторий git и установит плагины Vue CLI и зависимости npm.
Давайте обслужим наше приложение локально, чтобы оно работало должным образом:
$ cd electron-vue
$ npm run serve
Вы сможете посетить свое приложение с помощью веб-браузера, перейдя по адресу http: // localhost: 8080 /. Вы должны увидеть следующую страницу:
Вы можете видеть, что в нашем приложении уже настроена маршрутизация с двумя примерами: главная и страница о страницах.
Установка Electron в ваше приложение Vue
После создания нашего проекта Vue давайте теперь установим Electron в нашем проекте Vue, используя следующие команды:
$ npm install --save-dev electron@latest
При использовании переключателя --save-dev
Electron будет установлен в качестве зависимости от разработки в вашем проекте.
На момент написания этой статьи будет установлена электронная версия 6.0.1.
Загрузка приложения Electron
После установки Electron вам необходимо добавить код для начальной загрузки вашего приложения Electron и создать окно графического интерфейса, в котором будет открыто приложение Vue.
Создайте main.js
файл внутри своего проекта Vue и добавьте следующий код:
const { app, BrowserWindow } = require('electron');
const url = require("url");
const path = require("path");
let mainWindow
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, `./dist/index.html`),
protocol: "file:",
slashes: true
})
);
mainWindow.on('closed', function () {
mainWindow = null
})
}
console.log(app);
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
app.on('activate', function () {
if (mainWindow === null) createWindow()
})
Этот код позволит нам создать окно графического интерфейса пользователя, используя некоторые встроенные API-интерфейсы Electron, такие как BrowserWindow
и метод loadURL()
, который загружает файл index.html
из папки dist
.
Примечание: папка
dist
и файлindex.html
отсутствуют, пока вы не создадите проект Vue в первый раз.
Затем вам нужно установить точку входа вашего проекта в файл main.js
в файле package.json
следующим образом:
{
"name": "electron-vue",
"version": "0.1.0",
"private": true,
"main": "main.js",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
/* [...] */
}
Перейдите в официальную документацию, чтобы узнать больше о главном ключе.
Затем вам понадобится start
скрипт в package.json
файле, который можно использовать для сборки проекта Vue и запуска приложения Electron:
{
"name": "electron-vue",
"version": "0.1.0",
"private": true,
"main": "main.js",
"scripts": {
"start" : "vue-cli-service build && electron .",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
// [...]
}
Мы можем проверить, работает ли это, просто выполнив следующую команду:
$ npm start
Ваше приложение Vue будет создано в папке dist/
и должно быть открыто в собственном окне графического интерфейса пользователя с помощью Electron.
Это скриншот результата:
Вы можете заметить, что Electron не удалось загрузить многие ресурсы вашего приложения Vue, что не позволяет отображать приложение внутри графического интерфейса. Давай решим это.
Ошибки связаны с тем, как в index.html
файле определены различные пути к ресурсам приложения.
Если вы посмотрите на файл dist/index.html
, вы увидите примерно следующее:
<script src=/js/chunk-vendors.e9885347.js></script>
<script src=/js/app.f0025aa3.js> </script>
Вы можете видеть, что файлы ресурсов должны загружаться по абсолютным путям, поэтому Electron не сможет их загрузить, вместо этого нам нужно изменить их на относительные пути.
Мы можем сделать это с помощью файла vue.config.js
.
Файл vue.config.js
- это необязательный файл конфигурации, который будет автоматически загружен @vue/cli-service
, если он есть в корне вашего проекта, где находится файл package.json
. Это позволит настроить многие аспекты вашего проекта, не работая напрямую с файлом конфигурации Webpack.
Убедитесь, что вы находитесь в корневой папке вашего проекта, и создайте vue.config.js
файл:
$ touch vue.config.js
Затем добавьте следующий параметр конфигурации:
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? './' : '/'
}
Это скажет Vue использовать относительный путь в производстве и абсолютный путь в разработке.
Теперь снова запустите команду npm start
.
Electron сможет правильно загрузить приложение Vue:
У нас уже есть простое приложение с двумя страницами и навигацией между ними.
Мы можем нажимать на ссылки Главная и О, чтобы перемещаться между домашней страницей и страницами "Информация".
Обычно в настольном приложении у нас есть навигация в верхней строке меню, поэтому давайте изменим наше приложение, чтобы иметь возможность перемещаться из меню.
Меню можно создать с помощью метода Menu.buildFromTemplate (). Сначала перейдите в файл main.js
и импортируйте Menu
следующим образом:
const { app, BrowserWindow, Menu } = require('electron');
Затем определите метод createMenu()
следующим образом:
function createMenu() {
var menu = Menu.buildFromTemplate([
{
label: 'Menu',
submenu: [
{label:'Home',
click(){
console.log("Navigate to Home");
}
},
{label:'About',
click(){
console.log("Navigate to About");
}},
{label:'Exit',
click() {
app.quit()
}}
]
}
])
Menu.setApplicationMenu(menu);
}
Сначала мы вызываем метод buildFromTemplate()
, который принимает шаблон, который представляет собой просто массив options
для создания MenuItem.
Клавиша label
используется для указания имени каждого меню на верхней панели. Здесь мы просто создаем одно меню с именем Menu
.
Ключ submenu
принимает массив элементов. Каждый элемент определяет элементы подменю, которые будут отображаться при нажатии на метку.
В нашем примере мы создаем три пункта меню. Выход, домой и о вещах.
Затем мы вызываем setApplicationMenu()
, чтобы установить меню для нашего приложения. Это заменит меню по умолчанию, которое поставляется с Electron, на наше меню.
На данный момент работает только пункт меню выхода, а главное меню и меню о программе просто отображают сообщение в консоли.
Класс Menu существует в основном процессе, в то время как маршрутизатор Vue, используемый для навигации внутри нашего приложения Vue, существует в процессе визуализации, поэтому нам нужно будет использовать межпроцессное взаимодействие.
В частности, нам нужно вызвать метод рендеринга из основного процесса, то есть метод click()
пунктов меню. Для этого мы можем использовать метод webContents.send ().
В шаблоне меню измените click()
метод дома и о элементах:
submenu: [
{
label: 'Home',
click() {
console.log("Navigate to Home");
mainWindow.webContents.send('goToHome');
}
},
{
label: 'About',
click() {
console.log("Navigate to About");
mainWindow.webContents.send('goToAbout');
}
},
Мы просто используем метод webContents.send()
для отправки настраиваемого goToHome
сообщения, когда мы щелкаем по элементу «домой», или сообщения goToAbout
, когда мы нажимаем элемент «Сведения».
Затем нам нужно прослушивать эти сообщения в нашем процессе рендеринга, то есть в приложении Vue.
Откройте файл src/App.vue
, тег <script>
и следующий код:
<script>
const electron = window.require("electron")
export default {
mounted: function(){
electron.ipcRenderer.on('goToHome', ()=>{
this.$router.push('/');
});
electron.ipcRenderer.on('goToAbout', ()=>{
this.$router.push('/about');
});
}
}
</script>
Сначала мы импортируем электрон, используя метод window.require()
. Затем в методе жизненного цикла mounted()
компонента App мы вызываем метод ipcRenderer.on()
для прослушивания сообщений goToHome
и goToAbout
, отправленных из основного процесса. В зависимости от сообщения мы перемещаем пользователя либо на главную, либо на страницы с помощью метода $router.push()
.
Вот и все! Теперь мы можем использовать собственное меню для навигации внутри приложения Vue.
Вы можете найти исходный код этого проекта в этом репозитории GitHub.
Вы также можете использовать vue-cli-plugin-electronics-builder, который позволяет интегрировать Electron с Vue и избавляет вас от необходимости выполнять все предыдущие настройки вручную.
Заключение
В этом руководстве мы представили платформу Vue для создания прогрессивных веб-приложений и платформу Electron для создания кроссплатформенных настольных приложений с использованием веб-технологий. Мы также увидели, как интегрировать Vue с Electron для создания нашего примера настольного приложения.
Вы также можете проверить electronics-vue, шаблон для быстрого запуска Electron и Vue.js, который обеспечивает создание каркасов с использованием Vue CLI, распространенных плагинов Vue, electronic-packager и electronics-builder, единичного и сквозного тестирования и vue-devtools. , так далее.
После разработки приложения вам необходимо упаковать его для распространения, что можно сделать с помощью различных инструментов, таких как electronic-builder и electronics-packager.
Эта статья изначально была опубликована в Блоге Бадди.