如果你是前端工程师，肯定了解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目录中即可