共计 1970 个字符,预计需要花费 5 分钟才能阅读完成。
参考博客: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"
},
正文完