传统的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. Android侧滑菜单和轮播图之滑动冲突

    接手一个项目,有一个问题需要修改:轮播图不能手动滑动,手动滑动轮播图只会触发侧滑菜单. 猜测:viewpager控件(轮播图)的触摸事件被SlidingMenu控件(侧滑菜单,非第三方项目,乃是上个开 ...

  2. PL/SQL程序设计

    1 PL/SQL简介 1 什么是PL/SQL? PL/SQL是 Procedure Language & Structured Query Language 的缩写.PL/SQL是对SQL语言 ...

  3. Ruby on Rails Mountable vs. Full Engine

    原文 :https://www.travisluong.com/ruby-on-rails-mountable-vs-full-engine/一个Rails Engine 本质是一个 Rails ap ...

  4. Pascal的3种注释

    1.单行注释 {大括号里的内容都被注释掉} 2.单行注释2 //这种注释几乎是绝大部分语言中通用的了 3.多行注释 (*pascal的多行注释有点奇怪,使用的是:括号+星号的方式*)       其他 ...

  5. 使用update_attribute和validation

    在使用update_attribute方法时,不走validation 走validation的方法: create create! save save! update update_attribut ...

  6. ubuntu18---安装python3.6下的virtualenv15.1.0

    动态语言Python有着自己的虚拟环境,虚拟环境是程序执行时的独立执行环境,在同一台服务器中可以创建不同的虚拟环境供不同的系统使用,项目之间的运行环境保持独立性而相互不受影响.例如项目A可以在基于Py ...

  7. Ionic3 UI组件之 PhotoViewer

    PhotoViewer是常用的Cordova Plugin之一,用来显示图片. 组件特性: 根据Url显示图片 支持手势,可放大缩小 带分享按钮,可分享图片 带关闭按钮 加载错误时自动关闭组件 支持B ...

  8. (译) 在AngularJS中使用的表单验证功能

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  9. .net core 2.2 部署CentOS7(3)安装Xshell操控CentOS7

    目录: .net core 2.2 部署CentOS7(1)安装虚拟机 .net core 2.2 部署CentOS7(2)给虚拟机安装CentOS7 .net core 2.2 部署CentOS7( ...

  10. 【转】java线程池

    一简介线程的使用在java中占有极其重要的地位,在jdk1.4极其之前的jdk版本中,关于线程池的使用是极其简陋的.在jdk1.5之后这一情况有了很大的改观.Jdk1.5之后加入了java.util. ...