【转】如何使用electron+vue

文章转载自：https://www.cnblogs.com/jiangxifanzhouyudu/p/9517651.html

 

1.关于Electron的介绍：https://electronjs.org

　　简单来说就是可以将网页程序做成一个桌面软件

2.关于vue的介绍：https://cn.vuejs.org

　　作为前端框架，vue，angular等吸引了一大批前端

在使用之前如果能有nodejs基础和vue基础，那么用起来就能非常得心应手了。

 

Step1.Node.js安装配置

参考网页：https://www.runoob.com/nodejs/nodejs-install-setup.html，本文主要针对在windows下安装配置nodejs

一、下载安装

1.官网网址：https://nodejs.org/en/download/ ，请自行选择适合当电脑配置的版本进行下载

2.检查配置环境变量：cmd下输入path进行检查

3.查看版本：cmd下输入node -v   ，得到版本信息，说明已经安装成功

4.新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。

5.hello world：cmd下输入node进入node开发模式，尝试输出hello world（PS：.exit退出node开发模式，.help查看所有命令）

 

Step2.搭建vue开发环境

 1.安装淘宝npm镜像：由于在国内使用npm非常慢，一般都会推荐使用淘宝npm镜像，用淘宝的cnpm命令管理工具来代替默认的npm管理工具：$ npm install -g cnpm --registry=https://registry.npm.taobao.org；

2.镜像安装成功后，全局vue-cli脚手架：cnpm install --global vue-cli

3.输入vue检验是否安装成功：

 

 Step3.搭建vue项目

1.使用命令行创建项目：vue init webpack demo

根据提示一步一步创建，成功后，打开demo>config>index.js，将autoOpenBrowser改为true；

运行npm run dev，在浏览器中打开，显示如下：

修改index.js中的路径assetsPublicPath后，执行生成命令：npm run build

生成成功

目录下将新增一个dist文件夹，里面是打包好的东西。

 

Step4.安装Electron

在myproject下执行命令：npm install -g electron，切换回到:\MyProject\demo\dist，执行命令electron -v查看是否安装成功：

显示出版本号则表示已经安装成功。

 

Step5.创建主程序的入口（main.js）,及相关配置 package.json

 创建主程序的入口（main.js）,及相关配置 package.json

 

在dist文件夹内创建main.js文件及package.json 文件

文件内容如下：

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();  //开启调试工具
  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

{
  "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": "5.0.2",
    "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": "^4.0.0"//不打包成exe程序可以去掉
  }
}

package.json更多配置可查看官方文档：https://www.electron.build/configuration/configuration

 

 现在万事俱备只欠东风，

执行命令： electron .

 

出现如上效果说明你已经成功了。

 

Step6.打包成软件包

执行安装命令：

npm install -g electron-builder

npm install -g electron-package

执行打包命令：electron-builder

以上就是打包成功的效果，demo-1.0.4.exe 就是一个软件包，可以直接安装到系统上，不同的操作系统可以打包成不同的安装包。