electron-vue

安装python2.7，一定要2.7 https://www.python.org/download/releases/2.7/ 安装后设置环境变量：在环境变量path中添加C:\Python27 （python路径） 新建electron-vue项目 vue init simulatedgreg/electron-vue my-project 安装electron-rebuild cnpm install --save-dev electron-rebuild 全局安装原生模块编译模块，编译ffi模块时需要用到的，这里一定要安装 3.7.0版本稳定 cnpm install node-gyp@3.7.0 -g 安装后如何全局找不到模块就设置环境变量，path中添加C:\Users\Administrator\AppData\Roaming\npm 安装ffi cnpm install ffi --save 在项目中导入ffi const ffi=require("ffi"); npm run dev试着运行一下会发现报错了。 咋又作妖了呢？事实上electron在使用c++模时还需要根据electron的版本等信息重新编译一下，这样在electron中才能执行，我们需要进入ffi模块执行重新编译的命令，并注入参数。 cmd进入node_modules/ffi目录执行如下，

前几篇文章，我们介绍了一些开发中经常用到的功能，这篇文章我们主要是讲解下怎么发送系统通知，设置托盘 1.系统通知 其实Electron的系统通知比较简单，是用HTML5的Notification实现的，但是在这儿需要注意的是，windows平台发送通知是需要为程序设置appId（下一篇文章我们讲解下Electron怎么打包，怎么设置应用程序图标）。 通知一共有两种调用方式 HTML5 Notification API（渲染进程中使用） Notification模块（主进程中使用） 接下来，我们新建一个页面，来测试下渲染进程中怎么使用系统通知。 <template> <div> <el-button @click="sendNotification">发送系统通知</el-button> </div> </template> <script> export default { name: 'DemoTest', methods: { sendNotification () { const myNotification = new Notification('标题', { body: '通知正文内容' }) myNotification.onclick = () => { console.log('通知被点击') } } } } </script> 2.设置托盘 托盘属于系统级的操作

本文我们讲解下怎么修改窗口样式，系统默认的窗口非常普通，通常与设计不符，所以我们要自定义，接下来我们讲解下怎么去掉原有样式，怎么实现实现窗口的最小化，最大化和关闭按钮。还有怎么打开一个新页面 前三篇文章传送门 electron-vue跨平台桌面应用开发实战教程（一）——Hello World electron-vue跨平台桌面应用开发实战教程（二）——主进程常用配置 electron-vue跨平台桌面应用开发实战教程（三）——动态修改窗口大小 我们基于上一篇文章的代码（上一篇文章的git地址： https://gitee.com/hedavid/electron-vue-demos） 接着写。先看下上一篇文章实现的样式： 接下来我们就要开始今天的讲解了 1.去掉外边框 我们修改background.js，修改createWindow方法，创建BrowserWindow时增加 frame: false win = new BrowserWindow({ width: 400, height: 550, frame: false, webPreferences: { nodeIntegration: true } }) 这样窗口就会变成这样： 但是现在又有一个新问题，应用没有关闭按钮，没有最小化按钮，也不能拖拽移动位置了，接下来我们为他创建一个工具条。 2.增加操作栏 （注意

electron功能很强大，但是有一些跟操作系统底层交互的功能，electron无法实现，这个时候我们就可以调用原生来配合完成对应功能，本文主要讲解在macOS平台下，调用C++的dylib文件 在开始之前我们要安装 1.node-gyp npm install node-gyp -g 使用ffi-napi调用dll（c++） 1. 安装ffi-napi 执行 npm install ffi-napi --save 2. 准备C++动态链接库libdemo.dylib文件 libdemo.dylib文件可以去gitee中获取，也可以自己编译 gcc -g -shared demo.cpp -o libdemo.dylib electron-vue-demos gitee 地址 3. 调用libdemo.dylib文件中的方法 这里dll是找的别的写好的，dylib是我自己写的 let cpplib if (process.platform === 'darwin') { // 在使用libdemo的时候最好自己编译下cpp，命令gcc -g -shared demo.cpp -o libdemo.dylib let libPath // 在这儿需要判断下是开发环境还是打包环境，在mac上这两个环境用的路径不一样 if (process.env.NODE_ENV ===

本文来介绍下怎么使用electron-edge-js来调用C#动态链接库，由于是调用C#动态链接库，所以也只能在windows平台上使用，这一点需要注意 在开始之前，同样需要安装node-gyp和windows-build-tools，具体安装方法请参照上一篇 1.安装electron-edge-js npm install electron-edge-js --save 2.准备C# dll文件 dll文件请去gitee中获取，这里没办法上传 electron-vue-demos 3.调用dll中方法 因为是windows专属功能，这里我们要放到windows的判断中 // 只在windows平台下加载 edge = require('electron-edge-js') invoke = edge.func({ assemblyFile: path.resolve('resources/dll/electronedge.dll'), typeName: 'electronedge.Class1', methodName: 'Invoke' }) 具体调用方法 if (process.platform === 'win32') { invoke('这是自定义字符串', function (err, val) { if (err) throw err console.log(val

electron功能很强大，但是有一些跟操作系统底层交互的功能，electron无法实现，这个时候我们就可以调用原生来配合完成对应功能，本文主要讲解在windows平台下，调用C++的dll文件 在开始之前我们要安装 1.node-gyp npm install node-gyp -g 2.windows-build-tools npm install windows-build-tools -g 这里需要确定的是python的版本必须是2.7 使用ffi-napi调用dll（c++） 1. 安装ffi-napi 执行 npm install ffi-napi --save 2. 准备C++动态链接库DLL文件 dll文件请去gitee中获取，这里没办法上传 electron-vue-demos 3. 调用dll文件中的方法 const ffi = require('ffi-napi') const path = require('path') const Dll = ffi.Library(path.resolve('resources/dll/MyDLL.dll'), { Add: ['float', ['float', 'float']], Hello: ['string', []], StrLength: ['int', ['string']] })

前边几篇文章介绍了一些基本用法，最终都是要打包成可执行应用程序的，今天我们就讲讲怎么打包 1. 设置应用appId 在package.json 中增加 "appId": "com.ipp.electronvue", 2. 增加vue.config.js 这个文件是用来配置打包工具electron-builder的参数，代码中有对应的注释，按照对应的配置修改为自己的图标就好。 module.exports = { // 第三方插件配置 pluginOptions: { // vue-cli-plugin-electron-builder 配置 electronBuilder: { builderOptions: { // 设置打包之后的应用名称 productName: 'electron-vue-demos', win: { icon: 'public/electron-icon/icon.ico', // 图标路径 windows系统中icon需要256*256的ico格式图片，更换应用图标亦在此处 target: [{ // 打包成一个独立的 exe 安装程序 target: 'nsis', // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大 arch: [ 'x64' // 'ia32' ] }] }, dmg: {

参考地址 Use element-ui in electron-vue template have strange problems 把 element-ui 加入到 .electron-vue/webpack.renderer.config.js 文件中的白名单里面 在这句话 let whiteListedModules = ['vue'] 添加element-ui组件 修改为 let whiteListedModules = ['vue', 'element-ui'] 来源： https://my.oschina.net/formatkm/blog/3132976

起步 该样板代码被构建为 vue-cli 的一个模板，并且包含多个选项，可以自定义你最终的脚手架程序。本项目需要使用 node@^7 或更高版本。electron-vue 官方推荐 yarn 作为软件包管理器，因为它可以更好地处理依赖关系，并可以使用 yarn clean 帮助减少最后构建文件的大小。 # 安装 vue-cli 和 脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project # 安装依赖并运行你的程序 cd my-project yarn # 或者 npm install yarn run dev # 或者 npm run dev 你是一个 Windows 用户？ 请务必查看 Windows 用户注意事项 来确保你拥有 electron 和其他依赖关系所需的所有必要构建工具。 希望使用 Vue 1？ 只需指向 1.0 分支即可。请注意，electron-vue 已经正式废除了 vue@^1 的使用，因此，这些更改也同样会反映到项目结构、功能和文档上 (遗留文档)。 vue init simulatedgreg/electron-vue#1.0 my-project 来源： oschina 链接： https://my.oschina.net/u/3472697/blog

参考地址 Use element-ui in electron-vue template have strange problems 把 element-ui 加入到 .electron-vue/webpack.renderer.config.js 文件中的白名单里面 在这句话 let whiteListedModules = ['vue'] 添加element-ui组件 修改为 let whiteListedModules = ['vue', 'element-ui'] 来源： oschina 链接： https://my.oschina.net/formatkm/blog/3132976