vue基于electron構建第一個程序
electron
electron的優(yōu)點是跨平臺，可以打包成windows，ios，Linux安裝包。electron的市場前景有比較廣，比如我們用的vscode編輯器，就是用electron+TypeScript開發(fā)的，還有微軟，網易云音樂桌面應用程序，Facebook等等。electron在國外也十分的受歡迎。eletron也可以做定制開發(fā)，electron跨平臺性能，兼容性好，生態(tài)也非常豐富。
electron只支持node16+版本
打開vscode，我們也可以用linux命令創(chuàng)建一個項目文件夾，也可以手動右鍵新建一個文件夾，命名為項目名稱
mkdir electron
1.創(chuàng)建一個package.json文件
npm init -y
2.安裝electon
npm install electron -D
3.在項目根目錄創(chuàng)建一個main.js入口文件，并且在package.json文件，找到main，把默認的index.js也改成main.js
4.編寫第一個electron程序
main.js：
const { app, BrowserWindow } = require('electron')
// 構建一個窗口
const createWindow = () => {
const win = new BrowserWindow({
width:800,
height:600
})
}
app.whenReady().then(createWindow)
5.在package.json中，找到script，添加：
"scripts": {
"start": "electron ."
},
6.運行electron
npm run start
此時，系統(tǒng)中打開的是原生窗口，如果我們想要在窗口中加載點東西，比如嵌套一個外部網頁，我們可以在createWindow中加入
win.loadURL('https://www.baidu.com/')
這個時候我們保存，但是頁面并沒有渲染，我們還得重啟項目才能生效，這樣很麻煩，我們可以安裝
npm install nodemon -g
在package.json中，找到script，修改：
"scripts": {
"start": "nodemon --exec electron ."
},
這個時候我們再運行electron，就實現嵌入外部頁面了
npm run start
以后我們修改代碼，再次運行，就能自動幫助我們重新啟動進程了。
electron引用本地文件新建index.html
electron引用本地的文件，比如我們在根目錄新建一個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')
// 構建一個窗口
const createWindow = () => {
const win = new BrowserWindow({
width:800,
height:600
})
// 加載本地文件
win.loadFile('./index.html')
}
app.whenReady().then(createWindow)
這樣我們就可以隨心所欲地去開發(fā)我們的項目了，比如electron可以嵌套vue，react等等
electron還可以通過node訪問本地硬件設備，比如文件操作，訪問本地硬盤數據等等
什么是渲染進程(Render Process)：我們所能看得見被渲染出來的，就是渲染進程
什么是主進程(Main Process)：nodejs
如何在electron中打開類似于瀏覽器console的調試窗口？
在main.js中加入：win.webContents.openDevTools()
main.js
const { app, BrowserWindow } = require('electron')
完整代碼：
// 構建一個窗口
const createWindow = () => {
const win = new BrowserWindow({
width:800,
height:600
})
// 加載本地文件
win.loadFile('./index.html')
// 打開調試平臺
win.webContents.openDevTools()
}
app.whenReady().then(createWindow)
運行electron，這個時候我們會看到黃色的安全警告，處理方法：
方法1：在createWindow里添加
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
這種方法會屏蔽掉所有的警告，但是這種方法不推薦使用
方法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">
這個時候，我們的控制臺就變得干干凈凈了
以上就是vue基于electron構建第一個程序的詳細內容，更多關于vue electron程序構建的資料請關注腳本之家其它相關文章！
相關文章
props中設置了默認值,但是獲取時（獲取父頁面沒有傳的屬性） 打印出來是undefined,所以本文給大家介紹了解決vue中props對象中設置多個默認值的問題,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了vue項目中使用window的onresize事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了vue使用Highcharts實現3D餅圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關于VUE3引入html文件并傳值的相關資料,這是最近在項目中遇到了的一個需求,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇當vue路由變化時,改變導航欄的樣式方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了VUE搭建手機商城心得和遇到的坑，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了詳解如何制作并發(fā)布一個vue的組件的npm包，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
今天小編就為大家分享一篇vue生成文件本地打開查看效果的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3 + Vue-PDF 實現PDF 文件在線預覽實戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實現PDF 文件在線預覽實戰(zhàn)，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-06-06
在這篇文章主要為大家詳細介紹了如何一步步地實現一個基于?Vue?3?的輪播組件,這個組件的特點是可以通過鼠標滑動和滾輪來控制輪播圖的切換,感興趣的可以了解下2024-02-02