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

vue基于electron構建第一個程序

 更新時間:2023年01月11日 15:25:36   作者:千度麒麟  
這篇文章主要為大家介紹了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程序構建的資料請關注腳本之家其它相關文章!

相關文章

  • 解決vue中props對象中設置多個默認值的問題

    解決vue中props對象中設置多個默認值的問題

    props中設置了默認值,但是獲取時(獲取父頁面沒有傳的屬性) 打印出來是undefined,所以本文給大家介紹了解決vue中props對象中設置多個默認值的問題,需要的朋友可以參考下
    2024-04-04
  • vue項目中使用window的onresize事件方式

    vue項目中使用window的onresize事件方式

    這篇文章主要介紹了vue項目中使用window的onresize事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-08-08
  • vue使用Highcharts實現3D餅圖

    vue使用Highcharts實現3D餅圖

    這篇文章主要為大家詳細介紹了vue使用Highcharts實現3D餅圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • VUE3引入html文件并傳值方法舉例

    VUE3引入html文件并傳值方法舉例

    這篇文章主要給大家介紹了關于VUE3引入html文件并傳值的相關資料,這是最近在項目中遇到了的一個需求,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-07-07
  • 當vue路由變化時,改變導航欄的樣式方法

    當vue路由變化時,改變導航欄的樣式方法

    今天小編就為大家分享一篇當vue路由變化時,改變導航欄的樣式方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • VUE搭建手機商城心得和遇到的坑

    VUE搭建手機商城心得和遇到的坑

    這篇文章主要介紹了VUE搭建手機商城心得和遇到的坑,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-02-02
  • 詳解如何制作并發(fā)布一個vue的組件的npm包

    詳解如何制作并發(fā)布一個vue的組件的npm包

    這篇文章主要介紹了詳解如何制作并發(fā)布一個vue的組件的npm包,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue生成文件本地打開查看效果的實例

    vue生成文件本地打開查看效果的實例

    今天小編就為大家分享一篇vue生成文件本地打開查看效果的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • Vue3 + Vue-PDF 實現PDF 文件在線預覽實戰(zhàn)

    Vue3 + Vue-PDF 實現PDF 文件在線預覽實戰(zhàn)

    這篇文章主要介紹了Vue3 + Vue-PDF 實現PDF 文件在線預覽實戰(zhàn),文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下
    2022-06-06
  • 基于Vue3實現鼠標滑動和滾輪控制的輪播

    基于Vue3實現鼠標滑動和滾輪控制的輪播

    在這篇文章主要為大家詳細介紹了如何一步步地實現一個基于?Vue?3?的輪播組件,這個組件的特點是可以通過鼠標滑動和滾輪來控制輪播圖的切換,感興趣的可以了解下
    2024-02-02

最新評論