Electron+vue的使用

Electron

Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像QQ、优酷、网易音乐等等。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。Electron官网

Electron + Vue 联合使用

安装Nodejs

安装成功之后node -v,会显示版本。

node -v

v8.11.1

搭建Vue开发环境

我们直接使用脚手架工具vue-cli
我们在国内的npm非常慢，所以我们需要重新设置npm镜像，我设置的是淘宝的镜像

npm config set registry https://registry.npm.taobao.org/

我们可以看一下镜像地址是：

➜  vue npm config get registry  
https://registry.npm.taobao.org/

我们安装脚手架工具：

npm install --global vue-cli

我们安装web-pack：

npm install -g webpack

搭建vue项目

我们搭建项目：

vue init webpack YLeMusic

? Project name ylemusic   项目名称
? Project description music  项目描述
? Author YLe  作者
? Vue build standalone
? Install vue-router? Yes   是否需要路由
? Use ESLint to lint your code? No  是否需要语法检测
? Set up unit tests No   是否有test 工程
? Setup e2e tests with Nightwatch? No   是否有测试环境
? Should we run `npm install` for you after the project has been created? (recom
mended) npm
   vue-cli · Generated "YLeMusic".
# Installing project dependencies ...
# ========================

我们到YLeMusic目录下，之后执行：

npm run dev

 I  Your application is running here: http://localhost:8080

我们浏览器打开http://localhost:8080
此时显示的是

image.png

安装Electron

 npm install electron

我使用npm 能安装，我测试了好像可以只能使用cnpm,所以需要先安装cnpm。

npm install -g cnpm --registry=https://registry.npm.taobao.org
//输入命令,查看是否安装成功
cnpm 

使用cnpm安装Electron

➜  ~ cnpm install -g electron

Downloading electron to /usr/local/lib/node_modules/electron_tmp
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/electron_tmp'
npminstall version: 3.11.0
npminstall args: /usr/local/bin/node /usr/local/lib/node_modules/cnpm/node_modules/npminstall/bin/install.js --fix-bug-versions --china --userconfig=/Users/yanglele/.cnpmrc --disturl=https://npm.taobao.org/mirrors/node --registry=https://registry.npm.taobao.org -g electron

所以需要我们增加执行的权限：

➜  ~ sudo cnpm install -g electron
Password:
Downloading electron to /usr/local/lib/node_modules/electron_tmp
Copying /usr/local/lib/node_modules/electron_tmp/_electron@5.0.6@electron to /usr/local/lib/node_modules/electron
Installing electron's dependencies to /usr/local/lib/node_modules/electron/node_modules
[1/3] @types/node@^10.12.18 installed at node_modules/_@types_node@10.14.10@@types/node
[2/3] extract-zip@^1.0.3 installed at node_modules/_extract-zip@1.6.7@extract-zip
[3/3] electron-download@^4.1.0 installed at node_modules/_electron-download@4.1.1@electron-download
execute post install 1 scripts...
[1/1] scripts.postinstall electron@5.0.6 run "node install.js"
[1/1] scripts.postinstall electron@5.0.6 finished in 4s
Recently updated (since 2019-06-20): 2 packages (detail see file /usr/local/lib/node_modules/electron/node_modules/.recently_updates.txt)
  Today:
    → electron-download@4.1.1 › fs-extra@4.0.3 › graceful-fs@^4.1.2(4.2.0) (03:39:25)
  2019-06-22
    → @types/node@^10.12.18(10.14.10) (05:24:02)
All packages installed (141 packages installed from npm registry, used 8s(network 4s), speed 419.11kB/s, json 132(249.29kB), tarball 1.55MB)
[electron@5.0.6] link /usr/local/bin/electron@ -> /usr/local/lib/node_modules/electron/cli.js

我们看一下是否安装成功：

➜  ~ electron -v
v5.0.6

我们安装成功了。

创建主程序入口(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": "ylemusic",
  "productName": "ylemusic",
  "author": "Yle",
  "version": "1.0.0",
  "main": "main.js",//主文件入口
  "description": "music",
  "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": "ylemusic",
    "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"
  }
}

• 这个package.json 文件可能还需要进一步研究一下，怎么配置。
  之后我们再dist文件夹下执行：

electron .

我们就可以看到我们的桌面应用运行起来了。

image.png

Electron-vue

使用electron-vue 脚手架工具

vue init simulatedgreg/electron-vue my-project
cd my-project
npm install
npm run dev