Vue?electron零基礎使用教程
需求:給vue項目加一個外殼(electron),顧名思義也就是使用electron應用程序運行vue項目,直接將寫好上線的vue項目在線地址放入electron程序中即可
操作步驟:
1、構建:構建應用程序首先要先安裝electron相關依賴包以及搭建框架。在這里就不詳細贅述了,直接上官網看文檔https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
2、打包:此時就到了重要的時候,官方指定的是使用腳手架打包-----Electron Forge
首先安裝Electron Forge
使用npm
npm install --save-dev @electron-forge/cli
npx electron-forge import? Checking your system
? Initializing Git Repository
? Writing modified package.json file
? Installing dependencies
? Writing modified package.json file
? Fixing .gitignoreWe have ATTEMPTED to convert your app to be in a format that electron-forge understands.
Thanks for using "electron-forge"!!!
使用yarn
yarn add --dev @electron-forge/cli
npx electron-forge import? Checking your system
? Initializing Git Repository
? Writing modified package.json file
? Installing dependencies
? Writing modified package.json file
? Fixing .gitignoreWe have ATTEMPTED to convert your app to be in a format that electron-forge understands.
Thanks for using "electron-forge"!!!
其次使用make命令來創(chuàng)建可分發(fā)的應用程序,官方文檔也說的很清楚

3、最后直接賦上具體代碼

icon為我所創(chuàng)建應用程序圖標,out為輸出目錄,其打包所有配置均在main.js中進行
展示main.js,個別需注意:
–url為vue項目在線地址
–mainWindow為所創(chuàng)建應用程序打開的彈框
–BrowserWindow為官方api具體操作看這里https://www.electronjs.org/zh/docs/latest/api/browser-window
–圖中還自定義了打開應用程序窗口頂部菜單,雖然最后沒有使用,但是有需要的也可以打開注釋
main.js
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
const url = 'http://xxxxxxxxxx'
//清理緩存
const clearObj = {
storages: [
'appcache',
'filesystem',
'indexdb',
'localstorage',
'shadercache',
'websql',
'serviceworkers',
'cachestorage'
],
};
const createWindow = () => {
// Create the browser window.
//取消頂部菜單欄
// Menu.setApplicationMenu(null)
const mainWindow = new BrowserWindow({
maximizable: true,
show: false,
// frame: false,
autoHideMenuBar: true,
webPreferences: {
// preload: path.join(__dirname, 'preload.js'),
partition: String(+new Date())
},
})
// 加載 index.html
// mainWindow.loadFile(url)
mainWindow.setTitle("名字標題");
mainWindow.loadURL(url);
mainWindow.on('close', (event) => {
mainWindow.webContents.session.clearStorageData(clearObj);
mainWindow.reload();
})
mainWindow.maximize();
//自定義菜單
// const template = [
// {
// label: '重載',
// accelerator: 'CmdOrCtrl+R',
// click: (item, mainWindow) => {
// if (mainWindow) {
// // 重載之后, 刷新并關閉所有之前打開的次要窗體
// if (mainWindow.id == 1) {
// BrowserWindow.getAllWindows().forEach((win) => {
// if (win.id > 1) win.close();
// });
// }
// mainWindow.webContents.session.clearStorageData(clearObj, () => {
// mainWindow.reload();
// })
// }
// },
// },
// {
// label: '清除緩存數據',
// accelerator: 'CmdOrCtrl+Shift+Delete',
// click: (item, mainWindow) => {
// if (mainWindow) {
// mainWindow.webContents.session.clearStorageData(clearObj);
// mainWindow.reload();
// }
// }
// },
// ]
// const menu = Menu.buildFromTemplate(template)
// Menu.setApplicationMenu(menu)
// 打開開發(fā)工具
// mainWindow.webContents.openDevTools()
mainWindow.webContents.closeDevTools();
}
// 這段程序將會在 Electron 結束初始化
// 和創(chuàng)建瀏覽器窗口的時候調用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
createWindow()
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()
})
})
// 除了 macOS 外,當所有窗口都被關閉的時候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成幾個文件,然后用 require 導入。4、最后就是生成的應用程序的配置信息修改–package.json
在package.json中的config中添加如下代碼:
即forge下的packagerConfig中含有版本,名字,創(chuàng)作人,圖標等配置信息
"config": {
"forge": {
"packagerConfig": {
"appVersion": "1.1.3",
"name": "你的應用程序名字",
"appCopyright": "姓名",
"icon": "應用程序logo"
},
"makers": [
{
"name": "@electron-forge/maker-squirrel",
"config": {
"name": "my_electron_app"
}
},
{
"name": "@electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "@electron-forge/maker-deb",
"config": {}
},
{
"name": "@electron-forge/maker-rpm",
"config": {}
}
]
}
}
5、當然打包electron程序有很多種方法,比如:
electron-packager
electron-builder
Electron-Forge腳手架
Electron-Vue腳手架
等等,選擇適合自己項目需求的才是最實用的。
到此這篇關于Vue electron零基礎使用教程的文章就介紹到這了,更多相關Vue electron內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法
這篇文章主要介紹了Vue 實時監(jiān)聽窗口變化 windowresize的兩種方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
Vue 微信端掃描二維碼蘋果端卻只能保存圖片問題(解決方法)
這幾天在做項目時遇到微信掃描二維碼的然后進入公眾號網頁巴拉巴拉的,然后就很順利的遇到了在安卓端掃碼的時候,順利的一塌糊涂,然后到了蘋果端的時候,就只能出現一個保存圖片,然后就寫一下記錄一下這問題的解決方法2020-01-01

