構建Vue3桌面應用程式的方法
在本文中，我們將研究如何通過 Vite 開發 vue 3 桌面專案。
在專案中會用到 Electron ， 一種最流行的框架，可使用javascript構建跨平臺的桌面應用程式。 因此，許多受歡迎的應用程式都在使用Electron，例如VSCode，Slack，Twitch等。
先看看要做什麼：
儘管這只是一個 Vite 的基本模板，但它跑在專用程式而不是瀏覽器中。 這http://www.cppcns.com是構建自己的桌面應用的必要步驟。
以下是開發過程。
建立的基本 Vite 程式
首先建立 Vite 應用。 在這裡不會過多介紹 Vite 的工作原理。
在終端下執行以下命令：
npm init @vitejs/app cd [project-name] npm install
完成了，先在瀏覽器中試一下。
在終端中簡單的執行 npm run dev 命令。然後在瀏覽器中開啟本機地址，可以看到是這樣的：
沒有問題，接著就該把 Electron 新增到它的設定中了。
在 Vite 專案中新增 Electron
這裡按照 Electron 官方的 quick start 在我們的 Vite 應用中進行一些調整。
首先安裝 Electron。在終端下輸入以下命令：
Install Electronnpm install --save-dev electron
接著再看一下 Electron 手冊。
手冊上說簡單的 Electron 配置需要四個檔案：
- package.json —— 這個已經有了
- main.js
- preloader.js
- index.html
看上去專案中已經有了 main.js和index.html檔案，但它們是 Vite 的檔案，而不是 Electron 的檔案。 Vite 的檔案只能用於執行 Vite 程式，所以還需要提供單獨的 Electron 檔案。
main.js 用於建立桌面程式並載入到 index.html 中，它還應該包括我們構建的 Vite 程式程式碼。
構建 Vite 程式
所以首先必須構建 Vite 程式。 因為要把它與 Electron 進行整合，所以還需要做一些額外的配置。我們要確保在構建專案時，對最終
要構建的 Vite 專案將會建立以下結構的 dist 目錄。
但是由於我們的 Electron 程式碼位於專案的根目錄中，所以應該將整個專案的基礎設定為 dist 資料夾。 可以通過 path 庫在 vite.config.js 檔案中設定 base 屬性來實現。
//vite.config.js
import { defineConfig } from 'vite'
imp程式設計客棧ort vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
base: path.resolve(__dirname,'./dist/'),plugins: [vue()]
})
現在可以在終端中執行 npm run build 來建立 dist 目錄了。
設定 Electron 的 main.js
下一步是在專案的根目錄中建立 main.js 檔案。
建立完畢後我們只需要從 Electron quick start guide 中複製貼上程式碼就行了。
在我們載入 index.html 的地方，要將其改為 dist/index.html，以便在 dist 目錄中使用該檔案。
所以 main.js 中的最終程式碼是這樣：
//main.js
const { app,BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,height: 600,webPreferences: {
preload: path.join(__dirname,'preload.js')
}
})
win.loadFile('dist/index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate',() => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed',() => {
if (process.platform !== 'darwin') {
app.quit()
}
})
建立並編寫 preload.js.
接下來讓在專案根目錄中建立 preload.js 檔案，然後再次使用quick start code，這次不必修改任何內容。
//preload.js
window.addEventListener('DOMContentLoaded',() => {
const replaceText = (selector,text) => {
const element = document.getElementById(selector)
if (element) element.innerText 程式設計客棧= text
}
for (const type of ['chrome','node','electron']) {
replaceText(`${type}-version`,process.versions[type])
}
})
修改 程式設計客棧package.json
差不多快要完成了，最後還需要對 package.json檔案進行一些修改，以便執行 Electron 命令。
首先要設定 main 屬性，在預設情況下，Electron 會在根目錄中查詢 index.js 檔案並執行，但是由於我們的檔名為 main.js，所以需要在 package.json 中定義。
//package.json
{
"name": "vite-electron","version": "0.0.0","main": "main.js",// 這一行
...
}
然後設定執行 Electron 的方式，在 scripts 部分中新建立一個名為electron:程式設計客棧start 的指令碼，內容是electron . 。
//package.json
{
"name": "vite-electron","scripts": {
"dev": "vite","build": "vite build","serve": "vite preview","electron:start": "electron ." // 這裡
},...
}
以上就是所有的程式碼了。
最後在終端中執行： npm run electron:start 命令，然後就能看到：
桌面程式終於完成了，很簡單吧～
寫在最後
近期在提升 Vue 的過程中，發現一個高逼格的 Vue3+TS 教程。 無償分享給掘仔們，戳我看教程
到此這篇關於構建Vue3桌面應用程式的方法的文章就介紹到這了,更多相關Vue3桌面應用程式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！