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