electron vue教程Electron-Vue⼊门Demo
前提条件，Electron框架能够正常的运⾏（electron环境的配置不是本⽂要说明的部分）
1，安装vue的环境模块
npm install -g vue-cli
2，初始化vue⼯程
vue init webpack demo
下⾯⼏个选项注意
Install vue-router? yes
Use ESLint to lint your code? no
Set up unit tests no
Setup e2e tests with Nightwatch? no
3，修改config/index.js的参数
port:8080
autoOpenBrowser:true
assetsPublicPath: './'
4，运⾏编译⼯程
npm run dev
npm run build
5，编译完成后多出⼀个dist⽂件夹，后⾯的electron需要的⽂件main.js和package.json都在dist中追加main.js
const {app, BrowserWindow} =require('electron');//引⼊electron
let win;
let windowConfig = {
width:800,
height:600
};//窗⼝配置程序运⾏窗⼝的⼤⼩
function createWindow(){
win = new BrowserWindow(windowConfig);//创建⼀个窗⼝
win.loadURL(`file://${__dirname}/index.html`);//在窗⼝内要展⽰的内容index.html 就是打包⽣成的index.html
win.webContents.openDevTools();  //开启调试⼯具
<('close',() => {
//回收BrowserWindow对象
win = null;
});
<('resize',() => {
})
}
<('ready',createWindow);
<('window-all-closed',() => {
app.quit();
});
<('activate',() => {
if(win == null){
createWindow();
}
});
package.json
{
"name": "demo",
"productName": "项⽬名称",
"author": "作者",
"version": "1.0.4",
"main": "main.js",
"description": "项⽬描述",
"scripts": {
"pack": "electron-builder --dir",
"dist": "electron-builder",
"postinstall": "electron-builder install-app-deps"
},
"build": {
"electronVersion": "1.8.4",
"win": {
"requestedExecutionLevel": "highestAvailable",
"target": [
{
"target": "nsis",
"arch": [
"x64"
]
}
]
},
"appId": "demo",
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
},
"extraResources": [
{
"from": "./static/xxxx/",
"to": "app-server",
"filter": [
"**/*"
]
}
],
"publish": [
{
"provider": "generic",
"url": "xxxxx/download/"
}
]
},
"dependencies": {
"core-js": "^2.4.1",
"electron-packager": "^12.1.0",
"electron-updater": "^2.22.1"
}
}
6，运⾏electron⼯程，进⼊到dist⽬录中，执⾏以下命令electron .
OK，⼤功告成！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。