В этом руководстве мы увидим, как использовать 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.

Эта статья изначально была опубликована в Блоге Бадди.