欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue基于electron構(gòu)建第一個(gè)程序

 更新時(shí)間：2023年01月11日 15:25:36   作者：千度麒麟  
這篇文章主要為大家介紹了vue基于electron構(gòu)建第一個(gè)程序過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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)文章

最新評(píng)論