.js 的核心庫只關注視圖層，易于與其他庫或已有項目整合。但是在某些場景下，我們希望將 Vue.js 構建的頁面作為桌面應用來運行，那么我們該怎么做呢？答案是：結合 Electron。
Electron 是一個能將 JavaScript, HTML, CSS 等 Web 技術打包成可執行文件的跨平臺桌面應用開發框架。因此，結合 Vue.js 和 Electron 可以實現所需目標。
本教程將會指導你完成以下步驟：使用 Vue.js 編寫一個簡易應用，之后通過集成 Electron 打包成桌面應用。
二、構建 Vue.js 應用
1. 安裝 Node.js 和 npm：首先需要確保你的計算機上已經安裝了 Node.js 和 npm。可以在 Node.js 官網下載并安裝。
2. 安裝 Vue CLI：Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統。我們可以使用 npm 安裝 Vue CLI：
“`
npm install -g @vue/cli
“`
3. 創建 Vue 項目：使用以下命令創建一個新的 Vue 項目：
“`
vue create my-project
“`
4. 運行 Vue 項目：進入項目目錄并運行項目：
“`
cd my-project
npm run serve
“`
現在你的 Vue 項目已經創建并app內嵌h5運行，接下來我們將為其集成 Electron。
三、集成 Electron
1. 安裝 Vue CLI 插件 Electron Builder：在項目根目錄下運行以下命令來安裝 Vue CLI 插件 Electron Builder：
“`
vue add electron-builder
“`
2. 項目結構調整：在 src 文件夾中創建一個名為 “background.js”的文件，這個文件將作為 Electron 應用的主進程。然后，將 package.json 中的 “main” 和 “electron” 字段分別修改為 “src/background.js” 和 “electron”。這樣 Electron 就知道從 “src/background.js” 文件開始運行。
3. 運行 Electron 應用：運行以下命令，通過 Electron 啟動 Vue 應用：
“`
npm run electron:serve
“`
現在你已經成功集成 Electron 并運行起來了，接下來將說明如何打包該應用為可執行文件。
四、打包應用
1. 設置建議：在”package.json”文件中添加 “build” 對象，以方便對打包做出一些自定義設置，例如應用名稱、圖標等。
2. 打包命令：在項目根目錄下運行以下命令：
“`
npm run electron:build
“`
3. 輸出文件：經過一系列構建和打包過程后，輸出文件會被保存在 “dist_electron” 文件夾中。你可以在此找到針對不同平臺（如 Windows、macOS 等）的可執行文件。
至此，一個使用 Vue.js 搭建并通過 Electron 打包的桌面應用就誕生了！你可以學習更多關于 Vue.js 和 Electh5開發appron 的相關知識，編寫更為復雜的桌面應用來滿足實際需求。
