如果你是前端工程师,肯定了解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

运行后效果图:
图片alt

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,写入内容就可以进行测试,效果如下:
图片alt

图片alt

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