Создайте свое настольное приложение с помощью electronic-vue

внешний интерфейс JavaScript Vue.js Electron
Создайте свое настольное приложение с помощью electronic-vue

что такое электрон

На официальном сайте говорится так: Electron предоставляет среду выполнения Nodejs, ориентированную на создание настольных приложений, при этом используя веб-страницы в качестве графического интерфейса приложения, вы можете думать об этом как о мини-версии браузера Chromium, управляемой JavaScript.

Перевод: это выполнение, которое может быть выполнено, как узел: Electron app.js; это также основа для строительства кроссплатформенной платформы на рабочем столе для рабочего стола, используя HTML + CSS + JavaScript.

По сути, электрон — это оболочка с браузером Chrome (проблемы совместимости учитывать не нужно).

Electron использует веб-страницы в качестве своего графического интерфейса, а не JavaScript в комплекте с библиотеками графического интерфейса. Он сочетает в себе Chromium, Node.js и API для вызова собственных функций ОС (таких как открытые файловые окна, уведомления, значки и т. д.).

Есть два процесса, основной процесс и процесс рендеринга.

  • Основной процесс: процесс, выполняющий основной скрипт в package.json, становится основным процессом.

  • Процесс рендеринга: Каждая электронная страница выполняет свой собственный процесс, называемый процессом рендеринга.

Основной процесс — это окно из npm run start, нас интересует содержимое в окне, то есть процесс рендеринга.

electron-vue

electronic-vue — это проект, который сочетает в себе vue-cli и электрон. Он в основном избегает использования vue для ручной сборки электронных приложений, что очень удобно.

Все, что нам нужно сделать, это инициализировать проект vue-cli, как обычно.

У вас может быть веб-пакет vue-loader, electronic-packager или electronic-builder, а также некоторые из наиболее часто используемых плагинов, такие как scaffolding для vue-router, vuex и т. д.

Следующая картинка — это каталог моего блога, совмещенный с electronic-vue:

Main в src — это основной процесс, и все, о чем нам нужно позаботиться, — это процесс рендеринга рендерера. (В основной процесс добавлена ​​функция общей строки меню).

Релиз пакета

Существует два способа упаковки и выпуска:

  • электрон-упаковщик, метод упаковки относительно прост, для какой платформы вы хотите упаковать, просто выполните соответствующую команду.

  • электронный построитель, автоматическое развертывание, непрерывная интеграция, пока репозиторий кода, привязанный к github, изменился, его можно упаковать и выпустить. Довольно высокий. Конфигурация немного хлопотная, заинтересованные студенты могут обратиться к этомусмоделированный Greg.git books.IO/electron-vu…;

Эпилог

Приятно начинать.

электронная китайская документация:GitHub.com/электрон/плохой…