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程序構建的資料請關注腳本之家其它相關文章!
相關文章
Vue3 + Vue-PDF 實現PDF 文件在線預覽實戰(zhàn)
這篇文章主要介紹了Vue3 + Vue-PDF 實現PDF 文件在線預覽實戰(zhàn),文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-06-06