文档章节

探讨用Vue系列开发新WEB(SPA)应用

copperpeas
 copperpeas
发布于 2017/04/24 21:21
字数 1772
阅读 8
收藏 0
点赞 0
评论 0

探讨一下当下最前沿的前端工业化开发模式(Vue系列 React系列 AngularJS系列 )之一的Vue系列来讲解。 基于NODE.JS 完成自动化创建目录,请求代理,打包,发布,一体化开发。
相关技术要点(Vue,VueRouter,Vuex,Webpack,ES6,Nodejs)

今天讲的不是VUE,而是一种vue系列架构下的开发模式,VUE系列做技术参考,以mobile项目案例(案例mobile团队参与完成)为主线展开。

一: 实际项目展示,浏览下实际的目录结构及源代码

二: 需要了解的主要问题

  • 什么是SPA
    单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
  • 什么是ES6
    ECMAScript 6(以下简称ES6)是JavaScript语言的新一代标准。
    ES6手册 ES6新特性概览
  • 什么是Vue?
    Vue.js 1.x 是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的,走AngularJS方式 Vue.js 2.x是一套构建用户界面的渐进式框架,已经不完全是MVVM,走React方式。
    Vue文档
  • 什么是MVVM
    MVVM是Model-View-ViewModel的简写, MVVM模式和MVC模式一样,主要目的是分离视图(View)和模型(Model),MVVM 最早于 2005 年被微软的 WPF 和 Silverlight 的架构师 John Gossman 提出。 MVC: View->Controller->Model->View 起点触发是用户操作View View 传送指令到 Controller
    Controller 完成业务逻辑后,要求 Model 改变状态 [MVC 架构下 Controller 比较臃肿]
    Model 将新的数据发送到 View,用户得到反馈

进化的一些原因:
1:组件化开发。MVC开发模式 视图与状态是低耦合但没有高内聚,是分散的,而组件是需要高内聚,低耦合。View的操作与View是深度依赖,也不便于组件化开发
2:Controller瘦身。VM能够使得 Model 层和 View 层解耦更彻底,UI操作进一步降低依赖,同时VM分解固定操作逻辑,减轻Controller ,Controller就一个数据流路由的功能,数据流调度,分解了大部分业务
3:数据驱动而非传统事件驱动,可以获取更好的用户体验,即时响应

MVVM: View<-->ViewModel<==>Model 前面是自动,后面是需要操作
备注:React不是数据双向绑定的,不要理解错了,AngularJS才是. React:View-->ViewModel<==>Model

  • 什么是VueRouter?
    Vue的路由插件,负责路由分发,路由调整,回退,路由状态的管理
    VueRouter文档

  • 什么是Vuex?
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长。为了解决这个问题,Vue 提供 vuex。
    Vuex文档
    Vuex由Flux状态管理模式演变而来,类似的react的flux,redux状态管理流等
    引用 Redux 的作者 Dan Abramov 的话说就是:Flux 架构就像眼镜:您自会知道什么时候需要它。

  • 什么是状态管理及数据单向流?
    基于状态驱动视图,自然需要一个状态管理,在数据双向绑定中复杂的数据,太复杂了,数据操作不明确,单向数据流模式解决了复杂应用中双向绑定的问题。
    Vuex中数据单向流动:
    用户操作-->action-->mutations(state)-->store-->view-->用户操作
    redux中数据单向流动:
    用户操作-->action -->reducer(state)->store-->view-->用户操作

  • 什么是单文件组件及CSS命名空间
    参考reactNative开发模式,CSS命名空间也类似

  • 什么是webpack
    Webpack 是一个前端资源加载/打包工具,webpack已经是大部分前端项目打包工具的首选,grunt、glup、browserify等逐渐沦为辅助甚至完全被替代。 webpack文档

  • 感觉如此繁琐,为什么要用它
    最核心在于 web前端的复杂的交互与SPA页面应用的兴起,传统的开发模式已经不能满足增长的需求
    1: **到一定程度的操作频率,VirtualDOM内存的数据变化比Dom操作更快,同时便于逻辑处理 **
    2:代码量大,管理上需要合理的分解,便于维护管理
    3:页面组件化的开发,高内聚与低耦合,独立性强,复用性高,包括CSS命名空间的解决方案,TPL模板 4:**交互复杂度上来,Dom界面的维护,非常混乱,基于状态驱动,清晰的数据流,方便业务数据处理,同时可以提供排错,debug日志跟踪等. **
    5:不刷新数据即时响应变化, SPA当前核心需求
    6:不关心界面渲染,只关心数据,减轻界面相关开发
    7:完善的路由管理,插件机制, 二级目录,非锚点 8: 基于Nodejs的开发,实现一体化,脚手架自动化创建,开发自动刷新,请求代理,打包压缩,预编译模板页面,自动响应无需刷新,SEO预编译静态,发布版本号变化等
    ......更多实践中去体会

三: 具体怎么开发

1:安装vue,vueRouter初始化项目(类似java的高度自动化)
全局安装vue-cl
$ npm install --global vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
安装依赖
$ cd my-project
$ npm install
$ npm run dev

操作案例:
安装案例
备注:
runtime-only 打包的是 /node_modules/vue/dist/vue.common.js
standalone 打包的是 /node_modules/vue/dist/vue.js

2:安装vue第三方组件,vuex等其他插件
npm install vuex --save

3:整合vuex等到项目中
源码分析

4:项目配置调整
源码分析

##四:源码分析讨论
源码简单讨论

五:待机解决的问题

新模式下开发怎么继承,多站克隆问题
新模式组件编写与传统第三方组件的整合
开发技巧的发掘与熟练掌握
具体业务上面的踩坑工作
持续热情

##六:总结 第一代:基于Dom操作的页面化,简单压缩
第二代:基于Dom操作的模块化,组件化,基本的打包工具
第三代:基于状态驱动的高度模块化,组件化,即时响应,系统化打包工具

第三代前端技术优势:
完善生态开发环境,基于状态管理的数据流模型,打包发布系统化,基本关注点在具体业务和组件开发,同时也解决了常规开发的绝大多数痛点。

Facebook 重写 React 和 Relay 框架,旨在提升性能
AngularJS 2.0 正式版发布 Angular 4.1.0 发布

© 著作权归作者所有

共有 人打赏支持
copperpeas
粉丝 0
博文 4
码字总数 3040
作品 0
成都
程序员
Vue.js视频教程

Vue.js 1.0 免费中文视频教程在线观看和网盘下载地址收集 原文地址:http://phpecshop.blog.51cto.com/6296699/1834208 NideShop:基于Node.js+MySQL开发的高仿网易严选开源B2C商城(微信小...

ch10mmt ⋅ 2016/08/04 ⋅ 0

Vue-router(一) HelloWorld

由于Vue在开发时对路由支持的不足,后来官方补充了vue-router插件,它在Vue的生态环境中非常重要,在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是...

阿刚ABC ⋅ 04/19 ⋅ 0

Vue2.0之vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

浪里行舟 ⋅ 05/21 ⋅ 0

基于 Vue 的静态网站生成器 - VuePress

VuePress 是一个基于 Vue 的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。 它是为了满足 Vue 自己的子项目文档的需求而创建的。 VuePress 享用 Vue + webpack 开发环境,在 ...

EvanYou ⋅ 04/16 ⋅ 0

关于vue-router那些事

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

howgod ⋅ 05/21 ⋅ 0

五月前端知识集锦(每月不可错过的文章集锦)

目前自己组建的一个团队正在写一份面试图谱,将会在七月中旬开源。内容十分丰富,第一版会开源前端方面知识和程序员必备知识,后期会逐步写入后端方面知识。因为工程所涉及内容太多(目前已经...

夕阳 ⋅ 05/28 ⋅ 0

前端-优雅的VueJS

Vue.js轻松实现页面后退时,还原滚动位置 前言 从Vue.js 2.x发布之后,陆陆续续做了七八个项目,摸索出来了一套自己的状态管理模式,我将之称为Vuet。它以规则来驱动状态更新,它带来的是开发...

掘金官方 ⋅ 01/08 ⋅ 0

前端路由简介以及vue-router实现原理

后端路由简介 路由这个概念最先是后端出现的。在以前用模板引擎开发页面时,经常会看到这样 大致流程可以看成这样: 浏览器发出请求 服务器监听到80端口(或443)有请求过来,并解析url路径 ...

muwoo ⋅ 06/01 ⋅ 0

Vue单页及多页应用全局配置404页面实践

这篇文章也发在我的博客,欢迎围观😄 写在前面 前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口。下面我们用作例子的两个项目,均采用v...

FrankCheung ⋅ 05/20 ⋅ 0

Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704 ⋅ 2017/04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Kubeflow实战系列:利用TFJob导出分布式TensorFlow模型

介绍 本系列将介绍如何在阿里云容器服务上运行Kubeflow, 本文介绍如何使用TfJob导出分布式模型训练模型。 第一篇:阿里云上使用JupyterHub 第二篇:阿里云上小试TFJob 第三篇:利用TFJob运行...

全部原谅 ⋅ 5分钟前 ⋅ 0

007. 深入JVM学习—老年代

老年代空间的主要目的是用于存储由Eden发送来的对象,一般在经历好几次“Minor GC”还会保存下来的对象,才会被复制到老年代,这样就可以存放更多的对象,同时在老年代中执行GC的次数也相对较...

影狼 ⋅ 6分钟前 ⋅ 0

常见的一些C#开源框架或者开源项目

原:https://blog.csdn.net/qq_27825451/article/details/70666044 Json.NET http://json.codeplex.com/ Json.Net 是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更......

whoisliang ⋅ 7分钟前 ⋅ 0

设计模式基本原理

刚开始接触编程这行的时候看过设计模式,当时感觉学这些模式没有太大的用处,当时也看不太懂。但是随着慢慢接触这一行,经过一段时间的编程以后,再回过头来看设计模式,发现设计模式的确是太...

王子城 ⋅ 10分钟前 ⋅ 0

阿里云全面支持IPv6!一文揽尽4位大咖精彩演讲

摘要: 自从去年11月以来,阿里巴巴高度重视数据中心的网络改造、云产品改造、应用及网络改造等多个维度,经过半年以来的建设,阿里云已经完成了域名解析等关键产品的分析,现在阿里云已经完...

传授知识的天使 ⋅ 20分钟前 ⋅ 0

windows Android sdk 配置

1、下载Android SDK,点击安装,直接默认路径即可! 下载地址:http://developer.android.com/sdk/index.html 2、默认路径安装后,安装完成,开始配置环境变量。 3、打开计算机属性——高级系...

阿豪boy ⋅ 23分钟前 ⋅ 0

bash shell script 简明教程

User <--> bash <--> kernel shell is not kernel or part of kernel various shells: tcsh, csh, bash, ksh find the using shell: echo $SHELL find all the shells: cat /etc/shells what......

mskk ⋅ 25分钟前 ⋅ 0

Service Mesh简史

William Morgan Service Mesh是一个相当新的概念,讲它的“历史”似乎有些勉强。就目前而言,Service Mesh已经在部分企业生产环境中运行了超过18个月,它的源头可以追溯到2010年前后互联网公...

好雨云帮 ⋅ 26分钟前 ⋅ 0

10个免费的服务器监控工具

监控你的WEB服务器或者WEB主机运行是否正常与健康是非常重要的。你要确保用户始终可以打开你的网站并且网速不慢。服务器监控工具允许你收集和分析有关你的Web服务器的数据。 有许多非常好的服...

李朝强 ⋅ 38分钟前 ⋅ 0

压缩工具之zip-tar

zip 支持目录压缩。使用yum安装zip包,使用yum安装unzip包 zip 1.txt.zip 1.txt #将1.txt文件压缩,新生成的压缩文件为1.txt.zip,原文件保留 zip -r 123.zip 123/ #-r对目录操作。将123/目录...

ZHENG-JY ⋅ 39分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部