使用 electron-vue 构建你的桌面应用
来源:互联网 发布:人工智能手机芯片 编辑:程序博客网 时间:2024/05/21 06:56
什么是 electron
官网里这么说:Electron提供了一个Nodejs的运行时,专注于构建桌面应用,同时使用web页面来作为应用的GUI,你可以将其看作是一个由JavaScript控制的迷你版的Chromium浏览器。
翻译一下:它是一个运行时,可以像 node 一样这样执行:electron app.js;也是一个使用 html + css + javascript 构建跨平台原生桌面应用的框架。
本质上,electron 就是一个带了 Chrome 浏览器的壳子(无需考虑兼容性的问题)。
Electron用 web 页面作为它的 GUI,而不是绑定了 GUI 库的 JavaScript。它结合了 Chromium、Node.js 和用于调用操作系统本地功能的 APIs(如打开文件窗口、通知、图标等)。
具有两个进程,分别是主进程,以及渲染进程。
主进程:运行 package.json 里面 main 脚本的进程成为主进程。
渲染进程: 每个 electron 的页面都运行着自己的进程,称为渲染进程。
主进程也就是 npm run start 出来的窗口,我们关心的,还是窗口里面的内容,即是渲染进程。
electron-vue
electron-vue 是一个结合 vue-cli 与 electron 的项目,主要避免了使用 vue 手动建立起 electron 应用程序,很方便。
我们需要做的仅仅是像平常初始化一个 vue-cli 项目一样
vue init simulatedgreg/electron-vue my-project
就可以拥有一个 vue-loader 的 webpack、electron-packager 或是 electron-builder,以及一些最常用的插件,如vue-router、vuex 等等的脚手架。
下图是我的 blog 结合 electron-vue 的目录:
src 里的 main,即是主进程,而我们需要关心的则仅有 renderer 渲染进程。( main 进程里,添加了常用菜单栏的功能)。
打包发布
打包发布有两种方式:
electron-packager,打包方式比较简单,想为哪个平台打包,执行相应命令即可。
electron-builder,自动化部署,持续集成,只要监测到 github 上绑定的代码仓库发生了变化,即可打包发布。挺高大上的。配置有一点麻烦,感兴趣的同学,可以参考这个 https://simulatedgreg.gitbooks.io/electron-vue/content/cn/using-electron-builder.html ;
结语
上手很愉快。
electron 中文文档: https://github.com/electron/electron/tree/master/docs-translations/zh-CN ;
这有一个栗子:https://github.com/jkchao/vue-electron 。
- 使用 electron-vue 构建你的桌面应用
- electron 构建桌面应用
- 使用 AngularJS 和 Electron 构建桌面应用
- 使用 AngularJS 和 Electron 构建桌面应用
- 使用electron构建跨平台Node.js桌面应用
- 使用electron构建跨平台Node.js桌面应用
- 使用electron构建跨平台Node.js桌面应用
- 使用electron构建跨平台Node.js桌面应用
- 使用electron构建跨平台桌面应用教程
- 使用electron打包桌面应用
- 使用electron打包桌面应用
- [转载]使用electron构建跨平台Node.js桌面应用经验分享
- 使用Electron创建跨平台桌面应用
- NodeJS的桌面应用开发 Electron
- 基于Electron的桌面应用开发
- nodejs的桌面应用(electron)
- 使用Angular与TypeScript构建Electron应用
- Electron 创建桌面应用
- 根据先序和中序序列求二叉树
- redis常用命令讲解
- TensorFlow .tfrecords训练文件生成、使用
- 运营商卡名字多语言显示
- NYOJ Grasshopper And the String
- 使用 electron-vue 构建你的桌面应用
- 第二周
- 关于ssh为什么要在DAO层实现类中继承HibernateDaoSupport的原因
- 第三期 利用已经训练的神经网络进行图像识别 《显卡就是开发板》
- 手与大脑的距离决定了现实与理想的相似度
- (error) MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on d
- 什么是脏读,不可重复读,幻读
- 前端性能优化
- 理解数据库事务隔离级别以及脏读, 不可重复读, 幻读