![](https://img-blog.csdnimg.cn/20190908151807403.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue框架开发Electron
本专栏介绍怎么从嵌入式小白学习使用前端Vue框架开发Electron桌面应用记录
隐身的安徒生
开启人类智慧的宝库有三把钥匙:一把是数字,一把是字母,一把是音乐。
展开
-
Vue框架开发Electron0 - Windows搭建electron-vue开发环环境
安装node-v10.15.3-x64 安装python-2.7.12.amd64 配置python环境,添加环境变量 名称:PYTHONPATH值:安装目录,例如C:\Python27 名称:PYTHON值:%PYTHONPATH%\python.exe 安装node-gay ...原创 2019-09-08 15:23:47 · 276 阅读 · 0 评论 -
关于使用element-ui 和 vue-i18n进行国际化操作(以中英文切换为主)
下载安装好element-ui和vue-i18n: cnpm i --save element-ui和 cnpm i --save vue-i18n(npm install可代替cnpm i) 在renderer文件里面的main.js里面进行配置引入 import ElementUI from 'element-ui'import 'element-ui/lib/them...原创 2019-09-11 20:25:31 · 2952 阅读 · 0 评论 -
Vue框架开发Electron12 - 动态改变Element-Ui默认el-Input背景样式
Element-ui是一个非常好的UI设计模块,它提供给我们很多好看的按钮样式,非常适用于快速搭建UI,下面说说如果使用了element-ui之后,要更改它默认的el-Input样式应该怎么操作。使用调试工具找出他的样式默认表,具体操作如下:从上图知道默认的样式是.el-input__inner,那下面在改成自己想要的颜色:<style >.el-input__i...原创 2019-09-09 21:52:47 · 6124 阅读 · 0 评论 -
Vue框架开发Electron11 - 输出大数据Excel文件(2)
上一篇文章分享了如何在面对输出大数据Excel文件需求下,让自己的软件内存不暴涨,解决软件卡死的方法。用输出cvs文件方法可以解决,但美中不足的是使用上面的类输出csv文件时,当用户打开文件查看,那么数据就会停止写入,实际上就是文件描述符被占用了,当你关闭后,数据继续写入,但是在你打开的那段时间,输出的数据就没有了,所以基于这个bug,下面分享一个优化版本。const remote = re...原创 2019-09-09 21:45:54 · 598 阅读 · 0 评论 -
Vue框架开发Electron10 - 输出大数据Excel文件(1)
前言 在使用electron-vue框架时,常会碰到输出Excel数据表,那么我们就要考虑问题了,在提供的模块中,有xlsx模块,也有better-xlsx等模块,这些模块都是能用来生成xlsx文件,xlsx是比较常用的输出Excel文件模块,better-xlsx是在xlsx模块上衍生出来的,他可以对xlsx模块原有的sheet和cell进行颜色、长度等美观化操作,两个输出Excel文...原创 2019-09-14 16:20:54 · 2169 阅读 · 0 评论 -
Vue框架开发Electron9 - 文件dialog
dialog是node_module提供的一个可以打开文件对话框的模块,下面基于打开文件和保存文件讲解他的用法。在Main主进程里面使用1. 打开文件操作import { dialog } from 'electron' //导入dialog//showOpenDialog打开文件操作dialog.showOpenDialog({ properties: [ ...原创 2019-09-08 16:05:54 · 1840 阅读 · 0 评论 -
Vue框架开发Electron7 - 主进程和渲染进程通讯
第一种通信方法:在vue框架中要有主进程和渲染进程,每个进程都有个web页面,即BrowserWindow对象,此BrowserWindow对象是在主进程中创建的。进程和页面之间可以通信,主进程向渲染进程中发送消息时,调用webContents.send(id, data)方法,渲染进程使用ipcRenderer.on()方法监听数据。1.Main主进程import { ipcMa...原创 2019-09-08 15:54:29 · 2426 阅读 · 2 评论 -
Vue框架开发Electron6 - 定时器介绍
1. setTimeout函数用于延时 n ms后执行一次,返回值是唯一的标识符IDlet OnlyIDOnlyID= setTimeout(() => { // 写逻辑代码 OnlyID= null // 清空}, 500)注释: 500ms之后异步执行setTimeout里面的逻辑代码,只是执行一次;如果需要取消执行setTimeout里面的逻...原创 2019-09-08 15:50:30 · 2158 阅读 · 1 评论 -
Vue框架开发Electron5 - element-ui使用
如果说electron-vue是一个框架,那么element-ui就是这个框架的衣服,他提供了一整套的UI界面给用户使用,使得可以快速开发出美观、实用的界面工具,下面说说怎么穿这件衣服。1. 安装element-ui# 安装element-uicnpm i --save element-ui / npm install --save element-ui2. 导入element-u...原创 2019-09-08 15:48:11 · 1535 阅读 · 0 评论 -
Vue框架开发Electron4 - 开发模板
1. 新建的xx.vue文件里面,包含基本三要素:<template> // 这里写界面代码,相当于.HTML文件</template><script> // 这里写后台代码,相当于.js文件</script><style scoped> // 这里写样式代码,相当于.css文件 // s...原创 2019-09-08 15:43:40 · 833 阅读 · 0 评论 -
Vue框架开发Electron3 - Main进程和Renderer进程的基本认识
electron-vue的DEMO来直观看看这两个进程的粗浅认识: 可以看到Main进程管理的是这个app窗口(BrowserWindow),而Renderer进程负责的就是我们熟悉的页面UI渲染。不过实际上,它们远远不仅如此。下面一张图能够把它们所支持、管理的electron或者原生的模块大致列出来:由上图可知,主进程和渲染进程都有各自的模块,分工合作。Main进程开发...转载 2019-09-08 15:40:20 · 1071 阅读 · 0 评论 -
Vue框架开发Electron2 - 目录结构和安装
目录介绍大体的项目结构如下,根据选择的不同设置结构会有所不同:my-project├─ .electron-vue│ └─ <build/development>.js files├─ build│ └─ icons/├─ dist│ ├─ electron/│ └─ web/├─ node_modules/├─ src...原创 2019-09-08 15:35:32 · 1235 阅读 · 0 评论 -
Vue框架开发Electron1 - 入门介绍
electron简介 electron由Node.js+Chromium+Native APIs构成。你可以理解成,它是一个得到了Node.js和基于不同平台的Native APIs加强的Chromium浏览器,可以用来开发跨平台的桌面级应用。它的开发主要涉及到两个进程的协作——Main(主)进程和Renderer(渲染)进程。简单的理解两个进程的作用: Main进程主要通...转载 2019-09-08 15:31:26 · 348 阅读 · 0 评论 -
electron-vue打包安装
修改package.json文件增加输出Windows配置......"scripts": { "build": "node .electron-vue/build.js && electron-builder --ia32 --x64", "build:dir": "node .electron-vue/build.js && electr...原创 2019-09-11 20:32:10 · 669 阅读 · 0 评论