使用 electron-vue 构建你的桌面应用

qieangel2013 发布于2019-08-21 17:21 / 3169人阅读

摘要：翻译一下它是一个运行时，可以像一样这样执行也是一个使用构建跨平台原生桌面应用的框架。具有两个进程，分别是主进程，以及渲染进程。

什么是 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.gitbook... ；

结语

上手很愉快的。

electron 中文文档： https://github.com/electron/e...

这有一个栗子：https://github.com/jkchao/vue... 。

私有云 idc机房托管 saas应用构建构建多页应用构建安全的php应用数据库应用程序构建器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89404.html

electron-ui 快速方便的打造炫酷的桌面应用

摘要：是什么是基于和扩展出来的一套基础的应用框架，目的是为了快速的搭建炫酷的桌面应用，其实也算不上框架只是一种解决方案而已，让后来的开发者在少采坑的情况下搭建出相对漂亮而快速的应用为什么要做这个公司的有个项目使用搭建的，最开始只是套了个网页 electron-ui是什么 electron-ui是基于electron和electron-vue扩展出来的一套基础的应用框架，目的是为了快速的搭建炫...

Magicer 2019-08-23 12:43 评论0 收藏0
electronVue+bootstrapVue搭建桌面应用开发环境

摘要：下安装安装和脚手架样板代码安装依赖并运行你的程序环境下安装在你的入口文件中注册组件，并且相应的代码实例 1.npm下安装electron npm install electron -g 2.安装 vue-cli 和脚手架样板代码 npm install -g vue-cli vue init simulatedgreg/electron-vue my-project 3.安装依赖并运...

warnerwu 2019-08-21 17:30 评论0 收藏0
【easy-invoices】electron-vue、sqlite3 项目初探

摘要：远程读取会有许多限制，防止引起不必要的安全隐患。比较时可以把点去掉转为数字类型比较脚本执行完毕下载前可以拿到更新日志时间版本号和包大小，下载时可以拿到速度。然后开启该项目的构建。将第一步生成的填至项目环境变量，参数名为。父母都是做出纳相关的工作，希望我能给他们做个简单的进销存，在上班的时候使用。开发一个不需要花钱买服务器，不需要依赖网络（更新除外），单机版的程序，对于前端出身的我来说...

wpw 2019-08-23 12:36 评论0 收藏0
electron+vue制作桌面应用--前言

摘要：最近学习，发现一个脚手架，不仅集成好了等等，甚至打包工具打包命令都一并准备好了，实在是太方便了。于是产生了通过制作一个简单的桌面应用，边做边学的想法。最近学习vue，发现一个electron脚手架，不仅集成好了electron、vue、vue-state、vue-route、webpack等等，甚至打包工具打包命令都一并准备好了，实在是太方便了。于是产生了通过electron+vue...

fxp 2019-08-21 17:18 评论0 收藏0