参考博客：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"
  },