一烤蜕、在使用 Electron 之前我們要了解 Electron 是什么蔬蕊？
Electron 官網(wǎng)地址 點此 : electron 官方地址 工具合集地址
Electron 相當于一個瀏覽器的外殼 , 我們將 編寫的 HTML , CSS , Javascript 網(wǎng)頁程序 嵌入進 Electron 里面
以便于在桌面上進行運行挪挤。 通俗來講它就是一個軟件 ， 如 QQ 杯矩、網(wǎng)易云音樂沽损、優(yōu)酷視頻 等等亮元。功能至強大
超乎你的想象
二猛计、開發(fā)環(huán)境的準備
-
安裝 Node.js 壞境
Node.js 官網(wǎng)地址 點此 node.js 官方地址
-
安裝 Vue Cli
npm install -g @vue/cli 安裝 淘寶鏡像 cnpm ( 因 electron 包 特別大 本人嘗試過 npm 或 yarn 的 方法 需要等待很長時間 )
-
全局安裝 Electron
cnpm install electron -g //如果安裝還是 特比慢 或 不想安裝cnpn 可以聯(lián)系我們
查看 是否安裝成功 :
三、 搭建 vue 環(huán)境
1. 首先使用 vue-cli 搭建基礎(chǔ) vue框架
和平時寫 vue項目一樣 選擇自己需要的
cd electron-demo 進入項目目錄
yarn serve 啟動項目
四爆捞、vue項目中添加 electron 模塊
輸入 vue add electron-builder 后 按下回車
安裝過程中 此處我們選擇 ^13.0.0 按下回車
因 electron 安裝時間過長 導(dǎo)致安裝失敗
解決辦法 直接使用 cnpm install 進行安裝
安裝 完成后 我們使用 npm run electron:serve 運行項目 依舊是報錯的奉瘤。請耐心往下看完
此處 我們需要打開項目的目錄 找到 node_modules 下的 electron 。 刪除 這個文件以后 重新使用 cnpm install
至此煮甥。 electron 應(yīng)用 已經(jīng)搭建完成盗温。 我們使用 npm run electron:serve 進行啟動項目 ( windows 與 imac 一樣 )
已經(jīng)完美運行成功 可以看到桌面已經(jīng)彈出 electron-demo 應(yīng)用
五藕赞、查看electron+vue 項目目錄
相比于 基礎(chǔ) vue 項目 我們可以發(fā)現(xiàn)在目錄中 多出一個 background.js 文件
此處可以 配置 electron 應(yīng)用的一些設(shè)置。 如窗口大小 卖局、 是否可以縮放斧蜕、是否可以移動窗口等等
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()
})
}
}
注意：打開和 關(guān)閉 開發(fā)者工具 請點擊。 操作欄 > view > Toggle Developer tools
我們可以在官網(wǎng)的文檔里搜索一下砚偶。進行一些配置 （ 詳細配置請查看官網(wǎng)配置 ） 鏈接已經(jīng)放在文章開頭啦
六批销、打包 electron 應(yīng)用
打包應(yīng)用 使用 npm run electron:build 進行打包 （ imac 系統(tǒng) 和 windows系統(tǒng) 一樣使用這個 ）
此處 以 iMac 為例 （ 下面會有 windows 解決方案 ）
當我們看到。 Build complete ! 時 就說明 打包成功 可以查看 dist_electron / mac 里面就是打包好的應(yīng)用 （ 蘋果系統(tǒng) ）
windows 解決方案
- 打包 windows 應(yīng)用時 我們需要將 整個項目的源碼 上傳到 windows 電腦上
- 上傳到 windows 電腦上后 同樣需要安裝 cnpm 不然 electron 是安裝不上的
- 打開項目目錄 刪除掉 node_modules 重新 cnpm install
- 如果還是無法打包 刪除掉 node_modules / electron 目錄 重新 cnpm install
- 然后運行 npm run electron:build 進行打包
