文档章节

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

copperpeas
 copperpeas
发布于 2017/04/24 21:21
字数 1772
阅读 11
收藏 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 发布

© 著作权归作者所有

共有 人打赏支持
下一篇: PHP收发短信
copperpeas
粉丝 0
博文 8
码字总数 9525
作品 0
成都
程序员
私信 提问
关于ThinkSNS+程序的 SPA(H5)安装教程

ThinkSNS Plus最新体验demo:请于官网下载/安装最新版或点击在线咨询 最新官方活动:ThinkSNS+ V2.0贺中秋 9月20日权威发布 8.8折限时抢购 http://www.thinksns.com/reader/252.html H5 是 ...

ThinkSNS账号
09/28
0
0
基于 Vue 2 的 UI 组件 - XMUI

XMUI 基于vue 2+ ,为公司产品打(zao)造(lun)的(zi)可复用UI组件,适用于 移动 和 部分PC 端,其中包括 基础组件 和 应用组件,目前 组件 和 文档 在不断完善中。 特性 基于 Vue 开发的可复用...

吖面
08/09
0
0
前端可视化开发平台esview

github在线demo:https://github.com/furioussoul/soul-esview 项目介绍(目前处于开发阶段,不能投入生产): esview是一个前端可视化开发平台,用户可以在线编写代码添加组件,也可以在组装...

furioussoul
2017/10/21
0
1
Vue-router(一) HelloWorld

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

阿刚ABC
04/19
0
0
基于 Vue 的静态网站生成器 - VuePress

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

EvanYou
04/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

[springBoot系列]--springBoot注解大全

一、注解(annotations)列表 @SpringBootApplication:包含了@ComponentScan、@Configuration和@EnableAutoConfiguration注解。其中@ComponentScan让spring Boot扫描到Configuration类并把它加......

Jack088
11分钟前
0
0
tomcat编译超过64k大小的jsp文件报错原因

  今天遇到一个问题,首先是在tomcat中间件上跑的web项目,一个jsp文件,因为代码行数实在是太多了,更新了几个版本之后编译报错了,页面打开都是报500的错误,500的报错,知道http协议返回...

SEOwhywhy
32分钟前
2
0
flutter http 请求客户端

1、pubspec文件管理Flutter应用程序的assets(资源,如图片、package等)。 在pubspec.yaml中,通过网址“https://pub.dartlang.org/packages/http#-installing-tab-”确认版本号后,将http(0...

渣渣曦
33分钟前
0
0
Django基本命令及moduls举例

一、Django基本命令 1.创建项目 django-admin.py startproject mysite 创建后的项目结构:- mysite - mysite #对整个程序进行配置 - init #导入包专用- settings ...

枫叶云
47分钟前
7
0
zabbix安装

rpm -ivh http://repo.webtatic.com/yum/el6/latest.rpm 安装jdk rpm -ivh (自行在网上下载rpm包) 安装php并修改相应参数 yum -y install php56w php56w-gd php56w-mysqlnd php56w-bcmath......

muoushi
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部