151  
查询码:00000673
Electron+vue
作者: 郁冲冲 于 2021年12月23日 发布在分类 / 人防组 / 人防前端 下,并于 2021年12月23日 编辑
Electron+vue

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 就是一个软件包,可以直接安装到系统上,不同的操作系统可以打包成不同的安装包。

 






 推荐知识

 历史版本

修改日期 修改人 备注
2021-12-23 18:13:43[当前版本] 郁冲冲 创建版本

 附件
知识分享平台 -V 4.8.7 -wcp