2.1、Electron Vue3 脚手架

该项目的目的，是为了要避免使用 vue 手动建立起 electron 应用程序。electron-vue 充分利用 vue-cli 作为脚手架工具，加上拥有 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最常用的插件，如 vue-router、vuex 等等。

https://electron.org.cn/vue/index.html

搭建vue项目

我们搭建项目：

# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli

vue init webpack my-electron-app
# 根据提示进行操作
? Project name my-electron-app
? Project description A Vue.js project
? Author wandl <hnxyhcwdl1003@163.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm 
  vue-cli · Generated "jeebiz-ui-electron".

切换到 my-electron-app 目录下，之后执行：

npm run dev

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

使用浏览器打开 http://localhost:8080 ； 默认的主界面如下：

安装 Electron

官方文档中推荐的安装方法是把它作为App的开发依赖项，这使你可以在不同的 app 中使用不同的 Electron 版本。 在你的app所在文件夹中运行下面的命令：

npm install electron --save-dev
# 或全局安装
npm install -g electron

使用 npm 安装会因为网速导致一些奇怪问题，推荐使用cnpm进行安装：

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

使用 cnpm 安装 Electron

cnpm install electron --save-dev
# 或全局安装
cnpm install -g electron
# 输出信息如下
Downloading electron to /usr/local/lib/node_modules/electron_tmp
Copying /usr/local/lib/node_modules/electron_tmp/_electron@8.1.0@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@^12.0.12 installed at node_modules/_@types_node@12.12.29@@types/node
[2/3] extract-zip@^1.0.3 installed at node_modules/_extract-zip@1.6.7@extract-zip
[3/3] @electron/get@^1.0.1 installed at node_modules/_@electron_get@1.9.0@@electron/get
execute post install 2 scripts...
[1/2] scripts.postinstall @electron/get@1.9.0 › global-agent@2.1.8 › core-js@^3.6.4 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "/usr/local/lib/node_modules/electron/node_modules/_core-js@3.6.4@core-js"
[1/2] scripts.postinstall @electron/get@1.9.0 › global-agent@2.1.8 › core-js@^3.6.4 finished in 98ms
[2/2] scripts.postinstall electron@8.1.0 run "node install.js", root: "/usr/local/lib/node_modules/electron"
[2/2] scripts.postinstall electron@8.1.0 finished in 17s
Recently updated (since 2020-03-02): 1 packages (detail see file /usr/local/lib/node_modules/electron/node_modules/.recently_updates.txt)
  2020-03-06
    → @electron/get@^1.0.1(1.9.0) (07:09:46)
All packages installed (85 packages installed from npm registry, used 19s(network 2s), speed 649.84kB/s, json 81(189.71kB), tarball 1.14MB)
[electron@8.1.0] link /usr/local/bin/electron@ -> /usr/local/lib/node_modules/electron/cli.js

检查是否安装成功：

electron -v
v8.1.0

创建主程序入口(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": "jeebiz-ui-electron",
  "productName": "jeebiz-ui-electron",
  "author": "wandl <hnxyhcwdl1003@163.com>",
  "version": "1.0.0",
  "main": "main.js",
  "description": "jeebiz-ui-electron",
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "electronVersion": "8.1.0",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "jeebiz-ui-electron",
    "artifactName": "jeebiz-ui-electron-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "jeebiz-ui-electron-${version}-${arch}.${ext}"
    }
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "electron-builder": "^20.44.4",
    "electron-package": "^0.1.0",
    "electron-updater": "^2.22.1"
  }
}

更新依赖版本

npm i

启动服务：

electron .

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