Electron Vue3.0搭建
1、准备环境
需准备以下环境:
- nodejs
- vue-cli
2、使用vue-cli创建项目
- 打开cmd,输入 vue ui 打开vue可视化界面
- 在弹出的vue项目管理器网页中创建项目
3、添加vue-cli-plugin-electron-builder插件
在vue可视化界面中点击插件--->添加插件--->搜索vue-cli-plugin-electron-builder插件--->安装
4、运行
在终端执行 yarn electron:serve 启动
5、备注
1、每次启动很慢
每次 yarn electron:serve 启动APP,出现如下信息:
INFO Launching Electron...
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
这是因为在请求安装vuejs devtools插件。需要kexue上网才能安装成功。如果不能kexue上网也没关系,耐心等待5次请求失败后会自动跳过。或者可以通过去掉加载vuejs devtools插件代码来实现:
//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: 800,
height: 600,
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()
})
}
}
2、开启vue-devtools
在background.js中把:
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
改为
import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer'
下面相应的调用也要改
await installExtension(VUEJS3_DEVTOOLS)