Vue?electron零基礎(chǔ)使用教程
需求:給vue項目加一個外殼(electron),顧名思義也就是使用electron應(yīng)用程序運行vue項目,直接將寫好上線的vue項目在線地址放入electron程序中即可
操作步驟:
1、構(gòu)建:構(gòu)建應(yīng)用程序首先要先安裝electron相關(guān)依賴包以及搭建框架。在這里就不詳細贅述了,直接上官網(wǎng)看文檔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ā)的應(yīng)用程序,官方文檔也說的很清楚
3、最后直接賦上具體代碼
icon為我所創(chuàng)建應(yīng)用程序圖標(biāo),out為輸出目錄,其打包所有配置均在main.js中進行
展示main.js,個別需注意:
–url為vue項目在線地址
–mainWindow為所創(chuàng)建應(yīng)用程序打開的彈框
–BrowserWindow為官方api具體操作看這里https://www.electronjs.org/zh/docs/latest/api/browser-window
–圖中還自定義了打開應(yīng)用程序窗口頂部菜單,雖然最后沒有使用,但是有需要的也可以打開注釋
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("名字標(biāo)題"); 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) { // // 重載之后, 刷新并關(guān)閉所有之前打開的次要窗體 // if (mainWindow.id == 1) { // BrowserWindow.getAllWindows().forEach((win) => { // if (win.id > 1) win.close(); // }); // } // mainWindow.webContents.session.clearStorageData(clearObj, () => { // mainWindow.reload(); // }) // } // }, // }, // { // label: '清除緩存數(shù)據(jù)', // 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(); } // 這段程序?qū)?Electron 結(jié)束初始化 // 和創(chuàng)建瀏覽器窗口的時候調(diào)用 // 部分 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 外,當(dāng)所有窗口都被關(guān)閉的時候退出程序。 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 導(dǎo)入。
4、最后就是生成的應(yīng)用程序的配置信息修改–package.json
在package.json中的config中添加如下代碼:
即forge下的packagerConfig中含有版本,名字,創(chuàng)作人,圖標(biāo)等配置信息
"config": { "forge": { "packagerConfig": { "appVersion": "1.1.3", "name": "你的應(yīng)用程序名字", "appCopyright": "姓名", "icon": "應(yīng)用程序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、當(dāng)然打包electron程序有很多種方法,比如:
electron-packager
electron-builder
Electron-Forge腳手架
Electron-Vue腳手架
等等,選擇適合自己項目需求的才是最實用的。
到此這篇關(guān)于Vue electron零基礎(chǔ)使用教程的文章就介紹到這了,更多相關(guān)Vue electron內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-05-05vue3.0中ref與reactive的區(qū)別及使用場景分析
ref與reactive都是Vue3.0中新增的API,用于響應(yīng)式數(shù)據(jù)的處理,這篇文章主要介紹了vue3.0中ref與reactive的區(qū)別及使用,需要的朋友可以參考下2023-08-08