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

探讨一下当下最前沿的前端工业化开发模式（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 发布

转载于:https://my.oschina.net/copperpeas/blog/886338