electron-vue开发日志1

electron-vue官方中文文档

electron+vue构建应用程序。
需求 完成单机桌面应用。

vue-electron：git地址

vue-electron是基于node.js完成的，所以需要配置node.js的环境，请自行去官网下载。同时，vue-electron是webpack的打包环境，具有webpack的基础更佳。

安装步骤

安装步骤特别简单，配置好node.js环境之后通过node.js的打包工具npm在命令行输入:

npm install -g vue-cli

vue-electron目录结构：

• .electron-vue(webpack各项配置文件，熟悉vue的应该有印象)
• build(配置文件)
• dist
• src（主要文件）
• staic(静态资源)

构建electron应用

平常构建electron应用需要三个基本文件：

1. main.js
2. packge.json
3. index.html

在electron-vue中已经自动打包好了，入口文件是index.ejs。
踩坑：配置element-ui时，出现主进程编译不成功。
原因：

所以需要在webpack.render.config.js中添加白名单系列。

let whiteListedModules = ['vue','element-ui']

接下来在命令行跑npm run dev就可以了，开始用这个框架走了一个误区，以为里面的菜单栏是在render中编辑的，但是后来发现electron把界面分为两层：main和render。
具体的vue就是在render中编写的，所以src下的render中的文件目录基本就是webpack打包后的vue目录层了。

之前踩坑菜单栏在render通过下拉菜单做菜单的想法是有点儿愚蠢…后来仔细读了eletron的官方文档后发现应该在main中配置菜单栏，在src/main/index.js下配置关于菜单栏的选项。

需要引用Menu接口：

import { Menu, BrowserWindow,app } from 'electron'

创建菜单

var template = [{
label: '用户管理(U)',
submenu: [{
    label: '用户管理(M)',
    accelerator: 'CmdOrCtrl+M',
    role: 'undo',
}, {
    label: '重做',
    accelerator: 'Shift+CmdOrCtrl+Z',
    role: 'redo'
}, {
    type: 'separator'
}, {
    label: '复制',
    accelerator: 'CmdOrCtrl+C',
    role: 'copy'
}, {
    label: '粘贴',
    accelerator: 'CmdOrCtrl+V',
    role: 'paste'
}]
}, {
label: '测试工程场景(I)',
role: 'help',
submenu: [{
    label: '学习更多',
    click: function () {
      electron.shell.openExternal('http://electron.atom.io')
    }
}]
},{
label:'测试控制(C)',
},{
label:'视图(V)'
},{
label:'系统校准(A)'
},{
label:'测试环境配置'
},{
label:'工具(T)'
},{
label:'数据编辑(E)'
},{
label:'数据监视'
},{
label:'帮助(H)'
}
];

现在已经能完成自定义菜单功能了：