Electron+vue的使用
Electron官网：https://electronjs.org/
Electron+vue的联合使用
搭建vue开发环境
1.安装淘宝npm镜像
由于在国内使用npm是非常慢的，所以在这里我们推荐使用淘宝npm镜像，使用淘宝的cnpm命令管理工具可以代替默认的npm管理工具：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；
淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；
搭建vue项目
使用命令创建项目，一步步选择之后开始等等项目创建完成
|
1
|
$ vue init webpack demo
|
成功之后修改启 动项，打开demo>config>index.js,具体修改如下：
执行命令，出现如下效果说明项目已经运行成功：
|
1
|
$ npm run dev
|
执行生成命令：
$ npm run build
注意： 生成的时候一定要修改index.js 中的生成路径，否则后面程序运行打包页面会显示空白，找不到路径
出现如下效果
项目下回多出一个dist的文件夹，里面就你打包好的东西
接下来一切操作都在dist文件夹目录下。
安装Electron
执行命令：
|
1
|
$ npm install electron
|
安装成功后执行：electron -v 查看一下是否安装成功
创建主程序的入口（main.js）,及相关配置 package.json
在dist文件夹内创建main.js文件及package.json 文件
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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(); //开启调试工具
win.on('close',() => {
//回收BrowserWindow对象
win = null;
});
win.on('resize',() => {
win.reload();
})
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
app.quit();
});
app.on('activate',() => {
if(win == null){
createWindow();
}
});
|
package.json
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
{
"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",//程序id
"artifactName": "demo-${version}-${arch}.${ext}",
"nsis": {
"artifactName": "demo-${version}-${arch}.${ext}"
},
"extraResources": [
{
"from": "./static/xxxx/",//需要打包的静态资源
"to": "app-server",//静态资源存放路径
"filter": [
"**/*"//打包静态资源文件夹内的所有文件 如果没有静态资源要打包进去，extraResources 这段代码去掉
]
}
],
"publish": [
{
"provider": "generic",
"url": "http://xxxxx/download/"//自动更新的安装包地址，初步使用publish这段代码不需要
}
]
},
"dependencies": {
"core-js": "^2.4.1",
"electron-packager": "^12.1.0",//不打包成exe程序可以去掉
"electron-updater": "^2.22.1",//不打包成exe程序可以去掉
}
}
|
package.json更多配置可查看官方文档：https://www.electron.build/configuration/configuration
执行命令： electron .
出现如上效果说明你已经成功了。
第五步：打包成软件包
执行命令
$ npm install electron-builder
$ npm install electron-package
执行打包命令：
electron-bulider
以上就是打包成功的效果，demo-1.0.4.exe 就是一个软件包，可以直接安装到系统上，不同的操作系统可以打包成不同的安装包。
PNG