参考博客: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@latestnpm i -D electron-packager

2.在 dist文件夹内增加 electron.js 和 package.json 文件
dist/electron.js

const electron = require('electron')const path = require('path')const app = electron.appconst BrowserWindow = electron.BrowserWindowconst globalShortcut = electron.globalShortcut //快捷键let mainWindowconst Menu = electron.Menufunction 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"  },