vue基于electron構(gòu)建第一個(gè)程序
electron
electron的優(yōu)點(diǎn)是跨平臺(tái),可以打包成windows,ios,Linux安裝包。electron的市場(chǎng)前景有比較廣,比如我們用的vscode編輯器,就是用electron+TypeScript開(kāi)發(fā)的,還有微軟,網(wǎng)易云音樂(lè)桌面應(yīng)用程序,F(xiàn)acebook等等。electron在國(guó)外也十分的受歡迎。eletron也可以做定制開(kāi)發(fā),electron跨平臺(tái)性能,兼容性好,生態(tài)也非常豐富。
electron只支持node16+版本
打開(kāi)vscode,我們也可以用linux命令創(chuàng)建一個(gè)項(xiàng)目文件夾,也可以手動(dòng)右鍵新建一個(gè)文件夾,命名為項(xiàng)目名稱(chēng)
mkdir electron
1.創(chuàng)建一個(gè)package.json文件
npm init -y
2.安裝electon
npm install electron -D
3.在項(xiàng)目根目錄創(chuàng)建一個(gè)main.js入口文件,并且在package.json文件,找到main,把默認(rèn)的index.js也改成main.js
4.編寫(xiě)第一個(gè)electron程序
main.js:
const { app, BrowserWindow } = require('electron') // 構(gòu)建一個(gè)窗口 const createWindow = () => { const win = new BrowserWindow({ width:800, height:600 }) } app.whenReady().then(createWindow)
5.在package.json中,找到script,添加:
"scripts": { "start": "electron ." },
6.運(yùn)行electron
npm run start
此時(shí),系統(tǒng)中打開(kāi)的是原生窗口,如果我們想要在窗口中加載點(diǎn)東西,比如嵌套一個(gè)外部網(wǎng)頁(yè),我們可以在createWindow中加入
win.loadURL('https://www.baidu.com/')
這個(gè)時(shí)候我們保存,但是頁(yè)面并沒(méi)有渲染,我們還得重啟項(xiàng)目才能生效,這樣很麻煩,我們可以安裝
npm install nodemon -g
在package.json中,找到script,修改:
"scripts": { "start": "nodemon --exec electron ." },
這個(gè)時(shí)候我們?cè)龠\(yùn)行electron,就實(shí)現(xiàn)嵌入外部頁(yè)面了
npm run start
以后我們修改代碼,再次運(yùn)行,就能自動(dòng)幫助我們重新啟動(dòng)進(jìn)程了。
electron引用本地文件新建index.html
electron引用本地的文件,比如我們?cè)诟夸浶陆ㄒ粋€(gè)index.html文件
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> hello world </body> </html>
在main.js中添加:win.loadFile('./index.html')
main.js:
const { app, BrowserWindow } = require('electron') // 構(gòu)建一個(gè)窗口 const createWindow = () => { const win = new BrowserWindow({ width:800, height:600 }) // 加載本地文件 win.loadFile('./index.html') } app.whenReady().then(createWindow)
這樣我們就可以隨心所欲地去開(kāi)發(fā)我們的項(xiàng)目了,比如electron可以嵌套vue,react等等
electron還可以通過(guò)node訪(fǎng)問(wèn)本地硬件設(shè)備,比如文件操作,訪(fǎng)問(wèn)本地硬盤(pán)數(shù)據(jù)等等
什么是渲染進(jìn)程(Render Process):我們所能看得見(jiàn)被渲染出來(lái)的,就是渲染進(jìn)程
什么是主進(jìn)程(Main Process):nodejs
如何在electron中打開(kāi)類(lèi)似于瀏覽器console的調(diào)試窗口?
在main.js中加入:win.webContents.openDevTools()
main.js
const { app, BrowserWindow } = require('electron')
完整代碼:
// 構(gòu)建一個(gè)窗口 const createWindow = () => { const win = new BrowserWindow({ width:800, height:600 }) // 加載本地文件 win.loadFile('./index.html') // 打開(kāi)調(diào)試平臺(tái) win.webContents.openDevTools() } app.whenReady().then(createWindow)
運(yùn)行electron,這個(gè)時(shí)候我們會(huì)看到黃色的安全警告,處理方法:
方法1:在createWindow里添加
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
這種方法會(huì)屏蔽掉所有的警告,但是這種方法不推薦使用
方法2,配置CSP(Content-Security-Policy):
在index.html中添加:
// 禁用外部資源 圖片 css js
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
// 禁用外部js
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
如果我們想要引入google-analytics 分析流量,我們可以這樣寫(xiě)
<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://www.google-analytics.com">
這個(gè)時(shí)候,我們的控制臺(tái)就變得干干凈凈了
以上就是vue基于electron構(gòu)建第一個(gè)程序的詳細(xì)內(nèi)容,更多關(guān)于vue electron程序構(gòu)建的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決vue中props對(duì)象中設(shè)置多個(gè)默認(rèn)值的問(wèn)題
props中設(shè)置了默認(rèn)值,但是獲取時(shí)(獲取父頁(yè)面沒(méi)有傳的屬性) 打印出來(lái)是undefined,所以本文給大家介紹了解決vue中props對(duì)象中設(shè)置多個(gè)默認(rèn)值的問(wèn)題,需要的朋友可以參考下2024-04-04vue項(xiàng)目中使用window的onresize事件方式
這篇文章主要介紹了vue項(xiàng)目中使用window的onresize事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue使用Highcharts實(shí)現(xiàn)3D餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實(shí)現(xiàn)3D餅圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法
今天小編就為大家分享一篇當(dāng)vue路由變化時(shí),改變導(dǎo)航欄的樣式方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08詳解如何制作并發(fā)布一個(gè)vue的組件的npm包
這篇文章主要介紹了詳解如何制作并發(fā)布一個(gè)vue的組件的npm包,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線(xiàn)預(yù)覽實(shí)戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實(shí)現(xiàn)PDF 文件在線(xiàn)預(yù)覽實(shí)戰(zhàn),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-06-06基于Vue3實(shí)現(xiàn)鼠標(biāo)滑動(dòng)和滾輪控制的輪播
在這篇文章主要為大家詳細(xì)介紹了如何一步步地實(shí)現(xiàn)一個(gè)基于?Vue?3?的輪播組件,這個(gè)組件的特點(diǎn)是可以通過(guò)鼠標(biāo)滑動(dòng)和滾輪來(lái)控制輪播圖的切換,感興趣的可以了解下2024-02-02