如果你是前端工程师，肯定了解Vue。那么Electron-Vue开发桌面程序也主要用Vue代码进行开发。参考文档：

官网地址：https://github.com/SimulatedGREG/electron-vue

文档地址：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

本文主要从安装到使用进行一个简单的说明：

1、安装部分

可以参考官网的上安装过程

# 安装vue-cli
npm install -g vue-cli

# 初始化项目
vue init simulatedgreg/electron-vue my-project

# 进入项目
cd my-project

# 安装依赖
yarn # or npm install

# 运行（这里不能使用electron .运行，页面显示不了）
yarn run dev # or npm run de

注意：在进行yarn这个步骤时，可能会报错：Error: Can't find Python executable "python", you can set the PYTHON env variable
解决方案：使用管理员权限打开命令窗口，执行如下命令：

npm install --global --production windows-build-tools

运行后效果图：

2、了解文档结构

my-project
├─ .electron-vue
│  └─ <build/development>.js files
├─ build
│  └─ icons/
├─ dist
│  ├─ electron/
│  └─ web/
├─ node_modules/
├─ src
│  ├─ main
│  │  ├─ index.dev.js
│  │  └─ index.js
│  ├─ renderer
│  │  ├─ components/
│  │  ├─ router/
│  │  ├─ store/
│  │  ├─ App.vue
│  │  └─ main.js
│  └─ index.ejs
├─ static/
├─ test
│  ├─ e2e
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ utils.js
│  ├─ unit
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ karma.config.js
│  └─ .eslintrc
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md

3、自定义菜单

首先在该文件下srcmainindex.js添加如下代码，放在app.on('ready', createWindow)之前：

const menuTemplate = [{
  label: '主页',
  click() {
    // 页面跳转方式一（推荐）
    mainWindow.webContents.send('href', 'index')
    // 页面跳转方式二
    // mainWindow.loadURL(winURL+'#/index')
  }
},
{
  label: '测试页',
  submenu: [
    {
      label: '第1页',
      click() {
        mainWindow.webContents.send('href', 'page1')
      }
    },
    {
      label: '第2页',
      click() {
        mainWindow.webContents.send('href', 'page2')
      }
    }
  ]
}
]

var Menu = require('electron').Menu
Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplate))

这里页面跳转可以采用两种方式：

• 方式1：mainWindow.webContents.send(‘href’, ‘index’)
• 方式2：mainWindow.loadURL(winURL+’#/index’)
  最好使用方式一，方式二有延迟，不够友好，但是选用方式一后，就需要我们处理下路由跳转问题，找到路由文件srcrendererrouterindex.js，代码如下：

import Vue from 'vue'
import Router from 'vue-router'

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: require('@/components/LandingPage').default
    },
    {
      path: '/page1',
      name: 'page1',
      component: require('@/components/page1').default
    },
    {
      path: '/page2',
      name: 'page2',
      component: require('@/components/page2').default
    },
    {
      path: '*',
      redirect: 'index'
    }
  ]
})

//重点在引入ipcRenderer 接收主进程传来的路由参数，进行路由跳转
const { ipcRenderer } = require('electron')
ipcRenderer.on('href', (event, arg) => {
  console.log(window.location.href)
  if (arg) {
    router.push({ name: arg })
  }
})

export default router

自己在components下创建两个文件page1.vue和page2.vue，写入内容就可以进行测试，效果如下：

4、打包

打包过程中该命令需要多运行几次，需要下载一些需要的文件，有可能会失败

npm run build

在编译打包过程中会遇到一些问题，如：

问题1：

Error: Application entry file "distelectronmain.js" in the "D:guidemo2buildwin-unpackedresourcesapp.asar" does not exist. Seems like a wrong configuration.

解决方案：参考文档 https://www.hi917.com/detail/325.html

问题2：如果在编译过程中要下载某些文件，如：

  • downloading     path=C:UsersAdministratorAppDataLocalelectron-buildercachensisnsis-3.0.1.13 url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.1.13/nsis-3.0.1.13.7z
  • cannot download: Error: connect ETIMEDOUT 13.250.177.223:443 path=C:UsersAdministratorAppDataLocalelectron-buildercachensisnsis-3.0.1.13 attempt=2

如果没下载下来，可以手动下载该文件，然后拷贝到.electron-vue目录中即可

其他方案： vue-cli-plugin-electron-builder