electron+vue建立桌面级应用入门这一篇文章就够了

写在前面

写这篇文章的时候已经是深夜十二点了，但是还是想写下来，因为我这个人有个毛病，就是当我发现一个新的好用的东西的时候常常会激动的睡不着觉，不记录下来根本睡不着，而且程序员晚睡不应该是标配吗？废话说了几句，说一下今天的主角，electron

做个自我介绍：

大家好，我叫electron,我是一个穿着Web衣服，拥有着js思想的精简版的Chromium浏览器，当你使用我的时候，你可以使用我的思想也就是使用js调用丰富的原生api来创造桌面应用，你可以可以把我看作是nodejs的变异体，只是我专注的是桌面应用，而nodejs专注的是web服务端。

怎么使用我？

使用我之前首先要明白我本质上是什么，如果经常使用nodejs的人，那么恭喜你，你在使用我的时候将会十分的得心应手，因为本质上来说，我就是一个nodejs的应用程序，只不过应用的入口文件是package.json文件，我的样子是这样的：

代码语言：javascript复制

your-app/
├── package.json
├── main.js
└── index.html

这里不让他说了，我这里简单的说一下，就是关于怎么创建一个package.json文件，这个我之前的文章不止一次的说过，包括之前写的nodejs的文章中也说过一次，我们可以直接npm init 就可以了，下面让他接着说

安装我

您可以选择全局安装我，也可以选择项目中具体使用的时候安装我，这个看您个人的需求，具体怎么区分，相信我的主人已经在别的文章中提到过，这里全局安装：

代码语言：javascript复制

npm install --save-dev electron

如果安装的过程失败了，有两个原因，第一个是网速不行，第二个是你使用的mac没权限，解决办法如下：

安装淘宝镜像并最高权限使用：

代码语言：javascript复制

sudo npm  install  -g cnpm --registry=https://registry.npm.taobao.org

如下图：

我怎么和vue配合

下面让我的主人直接写一个完整的例子给大家，相信大家看的更加的清楚：

先看一下运行的效果：

ok这个是最终呈现的一个效果，当然这里没有展示动态的，需要源码的可以直接到我的github里面clone，项目源码,这里不做gif了，着实不好整，QQ的gif生成器我已经不想吐槽了，具体什么效果呢？这个是一个帖子上面别人出的题目看，就是说利用vue的双向绑定的原理实现一个卡片的基本功能，下面输入什么，上面就展示什么，不符合规则的，还回复到之前的信息，具体你们下载下来运行就可以了。下面我分几步给大家说一下怎么实现这个html在electron下面进行改为桌面级的应用。

新建vue项目

这里直接给大家看我新建好的项目吧：

就是一个非常简单的vue项目，怎么新建vue项目？好吧，简单的说一下：(不想新建项目的直接clone我的项目运行就可以了。)

安装nodejs 下载即可
安装vue脚手架：npm install vue-cli -g
新建项目：vue init webpack ”项目名称“
安装插件：npm install
运行：npm run dev

觉得写的太过简单的，可以直接看我之前的帖子：安装nodejs，vue项目搭建，这里就不占篇幅了。

打包vue项目

在我们写好的项目文件夹中运行

代码语言：javascript复制

 npm run build

结束以后在我们的项目中多出来一个dist的文件包，那么这个就是我们打包结束的文件，我们可以直接运行里面index.html文件。

新建main.js

在我们dist文件夹下面我们新建一个main.js,里面我们引入electron

代码语言：javascript复制

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

同样的位置，我们新建一个package.json文件

代码语言：javascript复制

{
  "name": "clearlove",
  "productName": "card",
  "author": "clearlove",
  "version": "1.0.0",
  "main": "main.js",
  "description": "csdndemo",
  "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": "clearlove",
    "artifactName": "demo-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    }
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "electron-builder": "^20.44.4",
    "electron-package": "^0.1.0",
    "electron-updater": "^2.22.1"
  }
}

运行electron项目

最后我们直接运行该项目：

代码语言：javascript复制

electron .

到此vue electron的结合使用基本就结束了，效果就是前面看到的那样，至于说怎么打包成exe文件，下篇文章我们接着说，总之这个技术还是比较实用的，我这篇文章的篇幅不长，我看过别人写的，也总结了一下，归纳了别人的优点，但是很多都是通篇长论，我觉得意义不大，怎么新建一个vue项目这样的东西一带而过我觉得很合适，毕竟文章真正的重点不是这里。

说明：

如果您是直接clone我的源码，直接打包的话，会出现空白页面的情况，解决办法如下：

出现图片不出现的情况，解决办法如下：

如果还有别的问题，可以直接左侧微信联系我，感谢阅读！

vue.js json node.js javascript electron

0 人点赞