vue基于electron構(gòu)建第一個(gè)程序
electron
electron的優(yōu)點(diǎn)是跨平臺(tái)，可以打包成windows，ios，Linux安裝包。electron的市場(chǎng)前景有比較廣，比如我們用的vscode編輯器，就是用electron+TypeScript開發(fā)的，還有微軟，網(wǎng)易云音樂桌面應(yīng)用程序，F(xiàn)acebook等等。electron在國(guó)外也十分的受歡迎。eletron也可以做定制開發(fā)，electron跨平臺(tái)性能，兼容性好，生態(tài)也非常豐富。
electron只支持node16+版本
打開vscode，我們也可以用linux命令創(chuàng)建一個(gè)項(xiàng)目文件夾，也可以手動(dòng)右鍵新建一個(gè)文件夾，命名為項(xià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.編寫第一個(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)中打開的是原生窗口，如果我們想要在窗口中加載點(diǎn)東西，比如嵌套一個(gè)外部網(wǎng)頁(yè)，我們可以在createWindow中加入
win.loadURL('https://www.baidu.com/')
這個(gè)時(shí)候我們保存，但是頁(yè)面并沒有渲染，我們還得重啟項(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)
這樣我們就可以隨心所欲地去開發(fā)我們的項(xiàng)目了，比如electron可以嵌套vue，react等等
electron還可以通過(guò)node訪問(wèn)本地硬件設(shè)備，比如文件操作，訪問(wèn)本地硬盤數(shù)據(jù)等等
什么是渲染進(jìn)程(Render Process)：我們所能看得見被渲染出來(lái)的，就是渲染進(jìn)程
什么是主進(jìn)程(Main Process)：nodejs
如何在electron中打開類似于瀏覽器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')
// 打開調(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 分析流量，我們可以這樣寫
<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動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決
這篇文章主要介紹了vue動(dòng)態(tài)添加路由addRoutes之不能將動(dòng)態(tài)路由存入緩存的解決方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了Vue表單雙綁和組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法
這篇文章主要介紹了在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue類名如何獲取動(dòng)態(tài)生成的元素，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法
這篇文章主要給大家介紹了在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
這篇文章主要介紹了使用vxe-table合并單元格后增加選中效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vuex新手的理解與使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue 判斷頁(yè)面是首次進(jìn)入還是再次刷新的實(shí)例
這篇文章主要介紹了vue 判斷頁(yè)面是首次進(jìn)入還是再次刷新的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue實(shí)現(xiàn)購(gòu)物車的監(jiān)聽
這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽事件實(shí)現(xiàn)一個(gè)簡(jiǎn)單購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
vue3使用useDialog實(shí)現(xiàn)對(duì)話框的示例代碼
在日常開發(fā)中,彈窗是常見的一個(gè)功能,本文主要介紹了vue3使用useDialog實(shí)現(xiàn)對(duì)話框的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01