1 Зачем писать эту серию руководств
Я считаю, что все люди, которые читают эту статью, интересуются Электроном. На самом деле в Интернете есть довольно много руководств по Электрону, но большинство из них являются реализацией некоторых функциональных точек. Для создания подходящего проекта с нуля считается что Есть еще много людей, которые немного запутались. Так получилось, что я некоторое время изучал Electron, и подумывал разобраться с некоторыми заметками и подводными камнями во время учебы, и написать небольшой проект с нуля. Процедура от поверхностного к глубокому (или от входа к отказу), которая шаг за шагом проведет вас к написанию кода и реализации небольшого проекта, надеясь вдохновить вас.
2 Строительство проекта
В интернете есть относительно популярный скаффолдингelectron-vue, звезда 12.2k на github, все должны были о ней слышать или использовать, но сейчас мы ею не пользуемся,electron-vueдаvue-cli2.0Версия , теперь дебютировала 4.0, иelectron-vueДавно не обновлялся, можно использовать последнюю сборку vue plus pluginsvue-cli-plugin-electron-builderЧтобы построить проект, структура проекта также более ясна. Ладно, без глупостей, приступим...
2.1 Создайте проект с помощью vue-cli
Откройте инструмент командной строки, установите узел, установите пряжу, установите леса vue-cli, версия, которую я использую здесь:
MacBook-Pro:~ Bill$ node -v
v12.16.1
MacBook-Pro:~ Bill$ yarn -v
1.22.4
MacBook-Pro:~ Bill$ vue -V
@vue/cli 4.3.1
MacBook-Pro:~ Bill$
vue-cli создает проект инициализации:
vue create vue-electron-notes
Мы выбираем изготовление на заказ:
Vue CLI v4.3.1
? Please pick a preset:
default (babel, eslint)
❯ Manually select features
Выбираем кастомное создание, используя babel (компилятор синтаксиса), Router (роутинг), CSS Pre-processors (препроцессор css), Linter/Formatter (стиль кода, проверка формата):
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
❯◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
Для маршрутизатора мы используем режим истории, вводим y и переходим к следующему шагу:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
Здесь я выбираю Less в качестве препроцессора css.Вы также можете выбрать свои любимые Sass и Stylus:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
❯ Less
Stylus
Выберите инструмент проверки кода ESLint. Здесь я выбираю "ESLint + Airbnb config". Настоятельно рекомендуется всем использовать ESLint в проекте. Он использовался все время, и если вы его понимаете, то поймете, естественно... Следует по-прежнему соблюдать спецификации, которым следует следовать:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
ESLint with error prevention only
❯ ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
При выборе проверки ESLINT я выбрал «Lint On Save» здесь, проверьте «Lint и Fix On Commit» при отправке кода на склад, а код, который не соответствует спецификации, не разрешается отправлять на склад:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features:
◉ Lint on save
❯◉ Lint and fix on commit
Вот, чтобы спросить у babel, postcss, eslint, являются ли эти конфигурации отдельными файлами конфигурации или помещены в файл package.json, здесь мы выбираем «В выделенных файлах конфигурации», чтобы разместить их отдельно:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
Вот последняя операция, сохранять ли конфигурацию, если вам нужно использовать ту же конфигурацию в следующий раз, вы можете выбрать «да», я выбираю «нет»:
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) no
После выполнения вышеперечисленных операций, остальное мы ждем, пока проект загрузит пакет зависимостей, и инициализация проекта vue будет выполнена.
cd vue-electron-notesВойдите в проект и запустите егоyarn serve, на этот раз проблем нет, и он работает успешно!
2.2 Интеграция Electron в проект
Переходим в корневой каталог нашего проекта, выполняем следующую команду для установки плагинаvue-cli-plugin-electron-builder
vue add vue-cli-plugin-electron-builder
Выбираем версию^6.0.0:
✔ Successfully installed plugin: vue-cli-plugin-electron-builder
? Choose Electron Version (Use arrow keys)
^4.0.0
^5.0.0
❯ ^6.0.0
Здесь вы можете спокойно дождаться установки, она загрузит электронный файл зависимостей размером около 60 МБ, процесс может быть немного долгим, и он тесно связан с вашей сетью...
В процессе ожидания установки, по сути, мы можем также поболтать о визуальной установке другой страницы.vue-cli-plugin-electron-builderобразом, выполните следующую команду
vue ui
В это время автоматически откроется страница браузера, затем выберите меню плагинов слева, найдите и установите плагин:
Лично я предпочитаю использовать командную установку, которая проще, удобнее и быстрее.Конечно, какой бы метод установки не был использован выше, результат один и тот же. После завершения установки структура проекта будет перестроена, в каталоге src будет сгенерирован файл background.js и добавлена команда запуска, как показано ниже:
Тут на самом деле есть небольшая проблема, плагин установленElectronЭто версия 6.0, но на самом деле появилась последняя официальная версия.8.2.5Теперь, чтобы мы могли использовать последний API позже, нам нужно выполнить команду для обновления версии:
yarn add electron@8.2.5 -D
На данный момент все наши установки завершены, и мы можем запустить программу, чтобы увидеть эффект.Обратите внимание, что наша команда для запуска проекта теперь стала такой:
yarn electron:serve
В это время автоматически появится программа, и, наконец, все готово...
Что ж, подождите минутку, давайте проверим, есть ли это предупреждение в том месте, где только что выполнялась командная строка⚠️:
DONE Compiled successfully in 1339ms 1:52:39 PM
File Size Gzipped
dist_electron/index.js 651.77 KiB 148.32 KiB
Images and other types of assets omitted.
INFO Launching Electron...
(electron) The default value of app.allowRendererProcessReuse is deprecated, it is currently "false". It will change to be "true" in Electron 9. For more information please check [https://github.com/electron/electron/issues/18397](https://github.com/electron/electron/issues/18397)
Результат перевода Youdao: значение по умолчанию для allowrendererprocessreuse устарело, в настоящее время оно «false». В электроне9 оно становится «истинным». (Ну я английский подонок...)
Чтобы решить приведенное выше предупреждение, нам нужно добавить основной файл процессаbackground.jsДобавьте следующий код в:
app.allowRendererProcessReuse = true
Сегодняшнее строительство проекта здесь первым. Если вы думаете, что все в порядке, то мы увидимся в следующий раз! 😉