传统的vue SPA页面在浏览器环境中使用，但是有的时候我们还希望能够做成一个类似于桌面的app在PC上使用，希望不仅可以使用所有的浏览器SPA的功能，你也可能外加host os的功能，比如文件的本地保存，离线使用等。这时，electron就是一个很好的备选方案。electron本身集成了一个chrome核心的浏览器以及nodejs server模块，既可以使用已有的web技术栈，又能借助electron的跨平台能力，从而实现cross-platform的原生app。

作为开发者，还有一个痛点就是对不同的平台android, ios, windows pc, mac pc, linux pc分别要开发不同的代码，如何能够实现一篇代码在不同device上使用呢？

一个思路是使用微信的小程序，小程序内嵌在微信中，使用web开发技能来构建小程序，由于微信本身是跨平台的，支持各种不同的mobile操作系统，同样也支持pc版本，因此可以作为一个很好的思路去尝试。但是问题在于微信本身是一个封闭的生态，小程序开发虽然解决了开发者部分痛点，但是带来新的痛点：必须依照微信定义的简陋的开发规范，几乎什么都要自己去搭，无法使用巨大的开源力量。

另外一个思路就是使用阿里开源weex，weex专门用于解决开发人员的痛点：实现一份代码，在不同的os上运行，基于vuejs的组件式开发，能够大大提高开发的效率。但是貌似PC版本无法支持，但是这个问题应该可以通过同样聚焦于web开发跨平台应用的electron来解决

https://weex.apache.org/cn/guide/index.html

https://github.com/SimulatedGREG/electron-vue

https://www.gitbook.com/book/simulatedgreg/electron-vue/details/cn

https://coligo.io/bookmarking-app-electron-vuejs-firebase/

vuejs electron webpack集成使用的更多相关文章

  1. 一、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  2. vuejs和webpack项目（VueComponent）初尝试——瀑布流组件

    碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...

  3. webpack 集成 Typescript && Less

    webpack 集成 Typescript && Less TypeScript是JavaScript的一个类型化的超集,可以编译成纯JavaScript,在本指南中,我们将学习如何将 ...

  4. 二、Electron + Webpack + Vue 搭建开发环境及打包安装

    目录 Webpack + Vue 搭建开发环境及打包安装 ------- 打包渲染进程 Electron + Webpack  搭建开发环境及打包安装 ------- 打包主进程 Electron + ...

  5. webpack 集成 jQuery 和 Avalon

    webpack 系列 三:webpack 如何集成第三方js库 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 webp ...

  6. webpack集成vue单文件模式的很多坑（研究了1个星期）

    1.一开始不知道局部安装webpack后,如何调用webpack. 后来看说明文档(webpack中文网)才知道,有个npx可以启动本地安装的webpack. 我估计:全局安装webpack,全局的w ...

  7. webpack初体验_集成插件_集成loader

    webpack初体验 如果没装 webpack 就先装一下,命令行输入npm i webpack -g 新建一个项目 创建一个空的项目 定义一个名称 创建一个Module 选择静态 web 输入名称 ...

  8. webpack整合 .vue 文件,集成 vue-loader

    webpack集成vue-loader 创建一个文件夹 test_webpack_vue 在 test_webpack_vue 下新建目录 src 在 src 目录下 新建文件 index.html ...

  9. electron入坑指南

    electron入坑指南 简介 electron 实际集成chrome浏览器和node环境, 运行你写的网页 app 基本目录结构 index.html 名称可以不是index, 这个文件与普通网页的 ...

随机推荐

  1. 2013-12-LINUX 常用命令

    查看iptables状态: service iptables status 查询LINUX开机时间多久 1. cat /proc/uptime输出: 105040.44 105024.75 秒 2. ...

  2. Android中实时预览UI和编写UI的各种技巧

    一.啰嗦 之前有读者反馈说,你搞这个所谓的最佳实践,每篇文章最后就给了一个库,感觉不是很高大上.其实,我在写这个系列之初就有想过这个问题.我的目的是:给出最实用的库来帮助我们开发,并且尽可能地说明这个 ...

  3. 在Ubuntu16.04上使用Autofs

    在Solaris上,autofs是默认安装的,可以通过/net/<NFS server>很方便地访问远程的共享目录.但在Linux上(例如Fedora或者Ubuntu),使用autofs则 ...

  4. Class.forName()，Class.forName().newInstance() ，New ，类名.class,，class.forName(),，getClass()

       在Java开发特别是数据库开发中,经常会用到Class.forName( )这个方法.通过查询Java Documentation我们会发现使用Class.forName( )静态方法的目的是为 ...

  5. 【起】ACM类下为过往所做过的部分算法题目

    [起]ACM类下为过往所做过的部分算法题目 几百道题,日后细细品味.

  6. CentOS探索之路2---使用rpm安装JDK

    使用rpm安装jdk ​ 在前一Linux探索文章中http://www.cnblogs.com/Kidezyq/p/8782728.html,有关于通过yum指令安装原生OpenJDK的命令.当时有 ...

  7. api.setFrameGroupIndex

    设置 frame 组当前可见 frame setFrameGroupIndex({params}) params name: 类型:字符串 默认值:无 描述:frame 组名字 index: 类型:数 ...

  8. 脚手架(create-react-app)没有eject情况下，使用react-scripts的时候，动态设置环境变量

    在实际开发中,例如:有时候打包发布时,需要手动更新版本,比如修改package.json中的version,但是如果有时候忘了修改,那么又得build一次: 如果能动态设置多好,webpack下可以在 ...

  9. JPA之@Entity、@Table、@Column、@Id

    Java Persistence API定义了一种定义,可以将常规的普通Java对象(有时被称作POJO)映射到数据库.这些普通Java对象被称作Entity Bean.除了是用Java Persis ...

  10. 添加List集合覆盖问题

    今天在做一个项目的时候,发现了这样一个问题,为了让大家看得更直接明了,我直接放代码: public void InsertObjectToList(){ List<NewsProtetype&g ...