參考部落格：https://blog.csdn.net/jabony/...

安裝 Vue cli

1.安裝 vue cli4.x 全域性環境

npm install -g @vue/cli

2.建立 vue 專案（自己找個方便的檔案目錄建立專案）

vue create hello-world（專案名稱）
cd hello-world //進入專案根目錄
npm install //安裝依賴
npm run serve //執行專案

3.打包 vue 專案
在根檔案目錄的 vue.config.js 檔案裡（沒有就自己建立），修改輸出檔案路徑，例如：

module.exports = {
  publicPath: "./",
  outputDir: 'dist'
}

然後執行打包命令，

npm run build

就可以得到打包後的資料夾 dist。

使用 Electron

使用 electron，用打包後的 dist 檔案生成使用者端。
1.安裝 electron 依賴

npm i -D electron@latest
npm i -D electron-packager

2.在 dist資料夾內新增 electron.js 和 package.json 檔案
dist/electron.js

const electron = require('electron')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷鍵

let mainWindow
const Menu = electron.Menu

function createWindow () {
 
    Menu.setApplicationMenu(null)
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 980,
        height: 640
    })
 
    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
 
    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
 
    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        mainWindow = null
    })
 
    // 通過快捷鍵就可以開啟偵錯模式 ctrl + shift + l
    globalShortcut.register('CommandOrControl+Shift+L', () => {
        let focusWin = BrowserWindow.getFocusedWindow()
        focusWin && focusWin.toggleDevTools()
    })
}

app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})
 
app.on('activate', function () {
    if (mainWindow === null) createWindow()
})

dist/package.json

{
  "name": "專案名稱",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",
  "scripts": {
    "start": "electron ."
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^6.0.12"
  }
}

3.修改根檔案的 package.json，新增 electron_build 命令，如下：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --overwrite"
  },

使用 Electron 將 Vue 專案打包成使用者端

安裝 Vue cli

使用 Electron