1. Прежде чем использовать Electron, нам нужно понять, что такое Electron?
Адрес официального сайта Электрон нажмите здесь:электронный официальный адрес
Electron эквивалентен оболочке браузера.Мы встраиваем веб-программы HTML, CSS и Javascript, написанные на Electron, в Electron.
работать на рабочем столе. Вообще говоря, это программное обеспечение, такое как QQ, NetEase Cloud Music, Youku Video и так далее. Мощный
вне вашего воображения
2. Подготовка среды разработки
-
Установите среду Node.js
Адрес официального сайта Node.js нажмите здесьофициальный адрес node.js
-
Установите VueCli
npm install -g @vue/cli -
Установите зеркало Taobao cnpm (т.к. пакет электрона очень большой, я пробовал метод npm или yarn, и ждать приходится долго)
-
Установите Electron глобально
cnpm install electron -g //如果安装还是 特比慢 或 不想安装cnpn 可以联系我们
Проверяем успешность установки:
В-третьих, строить Vue Environment
1. 首先使用 vue-cli 搭建基础 vue框架
Напишите Vue Project в мире, выберите «Вам нужно».
cd electronic-demo в каталог проекта
пряжа служит для начала проекта
В-четвертых, добавьте электронный модуль в проект vue.
Введите vue, добавьте электронный строитель и нажмите Enter.
В процессе установки здесь выбираем ^13.0.0 и нажимаем Enter
Установка не удалась из-за длительного времени установки электронного
Решение состоит в том, чтобы установить напрямую с помощью cnpm install
После завершения установки мы используем npm run electronic:serve для запуска проекта и все равно получаем ошибку. Пожалуйста, наберитесь терпения и прочитайте ниже
Здесь мы находим необходимость открыть каталог проекта под электронным node_modules. Повторно используйте cnpm install позже удалите этот файл
Слишком далеко. Электронное приложение было построено. Мы используем npm run electronic:serve для запуска проекта (Windows такие же, как imac)
Он работает отлично и успешно, вы можете видеть, что на рабочем столе появилось приложение электронной демонстрации.
5. Просмотр каталога проекта electronic+vue
По сравнению с базовым проектом vue мы можем обнаружить, что в каталоге есть еще один файл background.js.
Здесь вы можете настроить некоторые параметры электронного приложения. Например, размер окна, можно ли его масштабировать, можно ли перемещать окно и т. д.
Файл background.js
'use strict'
import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
{ scheme: 'app', privileges: { secure: true, standard: true } }
])
async function createWindow() {
// Create the browser window.
const win = new BrowserWindow({
width: 1120,
height: 1090,
minHeight: 700,
minWidth: 1000,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
}
})
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
// if (!process.env.IS_TEST) win.webContents.openDevTools()
} else {
createProtocol('app')
// Load the index.html when not in development
win.loadURL('app://./index.html')
}
}
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
if (process.platform === 'win32') {
process.on('message', (data) => {
if (data === 'graceful-exit') {
app.quit()
}
})
} else {
process.on('SIGTERM', () => {
app.quit()
})
}
}
Примечание. Открытие и закрытие инструмента разработчика Нажмите. Операционный бар> Просмотр> Toggle Tools Tools
Мы можем поискать его в документации на официальном сайте. Сделайте некоторую настройку (для более подробной настройки, пожалуйста, проверьте конфигурацию официального сайта) Ссылка размещена в начале статьи.
6. Упаковка электронных приложений
Упакуйте приложение, используя npm run electronic:build to package (система imac и система Windows используют то же самое)
Возьмите iMac в качестве примера здесь (ниже будет решение для Windows)
когда мы видим. Сборка завершена!При успешном завершении пакета вы можете просмотреть упакованное приложение в dist_electron/mac (система Apple)
оконное решение
- При упаковке приложения Windows нам необходимо загрузить исходный код всего проекта на компьютер Windows.
- После загрузки на компьютер windows также необходимо установить cnpm, иначе электрон не установится
- Откройте каталог проекта, удалите node_modules и повторно установите cnpm.
- Если он по-прежнему не может быть запакован, удалите каталог node_modules/electron и повторно установите cnpm.
- Затем запустите npm run electronic:build to package