dmhsq-vue3-vite-electron Version0.0.1

dmhsq/vue3-vite-electron Version0.0.1

倉庫地址 https://gitee.com/dmhsq/vue3-vite-electron

可使用 腳手架 (還沒完善但是可以用)

npm i -g dmhsq-cli

dmhsq-cli init 然后忽略第一行 按步驟走

或者 dmhsq-cli init --name projectName --template templateName

templateName 可選如下

react-ts-electron

vue-electron

uni-app-electron

封裝了如下

可以通過 this. m a i n t h i s . main this. mainthis.render 調用

this. m a i n : 主 進 程 t h i s . main : 主進程 this. main:主進程this.render: 渲染進程

Apis

this.$electron.render

類似于 渲染進程 可使用渲染進程能用的方法

this.$electron.main

類似于 主進程 可使用主進程能用的方法

this.$main.createWindow(windowConfig,url,divConfig)

打開一個新的窗口

windowConfig為窗口配置

參考 electron 文檔的 https://www.electronjs.org/zh/docs/latest/api/browser-window

url為加載的地址 可為網絡地址也可以使用 file://來引用本地文件

divConfig接收兩個參數

{ name:"窗口名稱", isDevTool:"是否打開調試工具" }

1

2

3

4

用法如下

// windowConfig 可以自定義配置窗口配置 可不寫 有默認 const windowConfig = { width: 1200, height: 800, }; const url = 'https://xxxxx'; // 或者可以使用 file://來引用本地文件 const divConfig = { isDevTool: false, //是否開啟窗口調試 name: 'xxx', // 建議填寫 可通過名字刪除和獲取窗口屬性 }; this.$main.createWindow(windowConfig, url, divConfig);

1

2

3

4

5

6

7

8

9

10

11

效果如下

this.$main.getWindow(name)

返回一個已經創建的窗口的實例

如我們調用this.$main.createWindow(windowConfig,url,divConfig)時的name為’hsq’

則可以通過this.$main.getWindow(‘hsq’)來獲取

this.$main.closeWindow(name)

關閉一個已經創建的窗口的實例

如我們調用this.$main.createWindow(windowConfig,url,divConfig)時的name為’hsq’

則可以通過this.$main.getWindow(‘hsq’)來關閉

關閉窗口會自動銷毀

this.$main.chooseDir(title)

選擇一個文件夾 獲取文件夾路徑

title為標題

如下

this.$main.chooseDir(‘快快快選擇一個文件夾’)

返回的結果為數組形式 string{path}

選擇文件

this.$main.chooseFile(title,filters)

title作用 和 選擇文件夾一樣

filters 為過濾后綴名 也就是文件類型

如

const filters = [ { name: '圖像', extensions: ['jpg', 'png', 'gif'] }, { name: '視頻', extensions: ['mkv', 'avi', 'mp4'] }, { name: 'Custom File Type', extensions: ['as'] }, { name: 'All Files', extensions: ['*'] } ] console.log(this.$main.chooseFile("選擇文件",filters))

1

2

3

4

5

6

7

8

返回的是文件路徑的數組

全局配置

配置 vueWindow

配置 vue項目中通過this.$main.createWindow創建的窗體相關

在 config目錄下vueWindow.config.js

配置 主進程相關

在 config目錄下electron.config.js

拓展

網絡請求推薦使用 axios

可以配置 vue-router來實現彈出窗口做某些事

如 設置 url為 xxxx#settings

然后settings為配置頁面 可配置 electron-store來實現配置文件

Electron Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。