H5的框架近三年多以来发展的特别快，且各个公司用的框架不尽相同，有时候好不容易研究会了其中一种，结果入职新公司或者换项目时，又换框架了。很多时候前端都要快速的用一种没有用过的框架去写项目。
这篇文章只说怎么快速入门，至于框架本身深层次的理念和底层代码逻辑，需要自己去深挖。如果你刚接触前端不久，那这篇文章的帮助可能没那么大（没有帮助也可能因为我写的不好）。
如果有人接触过很多种的H5框架，那么就大概能知道，H5的框架在代码的书写规范上，封装模式上，都很类似。它们之所以这么类似，是因为H5开发本身的体系比较简单。
在H5开发中，无论遇到什么样的项目，归根结底，就三部分，结构，样式，逻辑。刚开始学H5，我们就强调了。为什么要提到这个，因为只要是H5的框架，就离不开这三个部分。所以在H5框架里，只要掌握了这三部分及它们的关系，就能快速入门这个框架。
下面只说步骤，没有代码示例，你要去结合官方文档。在看以下步骤之前，花几分钟时间大致的过一遍文档，看看有哪些内容。
框架本身的特点是什么
学习一门新的框架之前，一定要知道它自己有什么特点（优点和缺点），这样你才能知道你在哪一种项目中用哪一种框架比较好。就像你要追一个女孩之前，一定要弄清楚这个女孩的性格特征和喜好一样。比如Bootstrap适合做响应式的布局，JQuery降低了DOM的操作代码量。新的框架之所以会出现，基本上都是因为旧的代码模式在某方面有不足。
H5的框架，特点大多都是，模块化开发和组件化的调用（封装，这两个字几乎是贯穿所有框架），且绝大部分都是用面向对象的编程思想实现的（可见面向对象有多重要）。
框架的目录树
-
整个项目的结构入口（HTML文件）和JS逻辑入口。
-
单个组件的呈现方式和调用。
一般框架都有严格的命名规范及模块划分规范，文件与文件之间的层级关系很重要。所以要搞清楚，我们的项目开发代码应该在哪个文件夹下。单个组件的结构、样式、脚本的创建及调用。
至于单个组件的使用，多半都是将当前这个组件导出，然后在使用他的父级组件里导入，按照框架指定的方式引用就可以了。 -
可以更改的配置有哪些，这些配置分别都在哪个配置文件里。
框架HTML代码的声明和渲染
每个框架HTML代码的声明和渲染方式都不一样，拿三大框架示例：
- Vue：写在单个组件的.vue文件里，当组件被调用时自动渲染；
- React：使用JSX语法创建DOM，并利用类的render函数渲染；
- Angular：要新建一个单独的html文件，并且要在脚本的ts文件中做路径配置。
框架CSS代码的声明和渲染
一般情况下框架都会被使用于大型的PC端OA系统，无论是手机端还是框架本身也有对应的UI框架，比如Element-ui，IView（Weapp，Vux），Ant等等，开发时我们都用UI框架开发，只有特殊情况才会自己写样式。
所以还是要找到在哪里声明样式（局部的和全局的），样式如何生效到对应组件上。
框架脚本（JS/TS）代码的声明和渲染
这里要强调一下TS的重要性，它的语法模式类似于Java，完全模仿了强类型语言。个人觉得语言的约束越明确，学起来越简单。目前三大框架V、A、R的最新版本都基于TS，所以建议最好在研究框架之前先研究ES6和TS。
一般情况下，框架中都会有一个根上下文环境，每个组件也都会有自己独立的上下文环境。所以我们一般先看一下整个项目的逻辑入口文件及基本配置，然后再去研究组件的脚本。
组件中的脚本：
- 变量和函数的声明；
Vue和小程序在每个组件的上下文环境对象中提供一个对象专门声明数据，React和Angular中将数据声明在类的属性上。 - 组件的生命周期，生命周期中的钩子函数；框架提供的默认事件；
- 变量在DOM中的渲染（声明式的渲染，属性渲染，条件渲染，列表渲染），Vue和Angular中都是使用指令，但是React代码比较靠近底层，相对来说略难；
- 函数的调用和传参；
- 函数中访问或设置变量的值；
- 函数中访问当前组件上下文环境中的函数和封装好的公共函数；
- 事件:
（1）事件的绑定方式；
（2）事件的冒泡、捕获；
（3）事件对象；
（4）参数传递；
（5）绑定事件的事件处理程序中this的指向（一般情况下指向当前组件的上下文环境）； - 无论是哪种框架，都属于前端框架，所以各种封装理念都不会变，在开发过程中，高频使用的函数，按功能划分的配置（路由和状态管理）等都可以封装导出，然后导入某个文件使用。ES6+的版本和TS都提供export和import功能。
高级
组件的封装和使用
- 父组件调用子组件；
- 组件之间的数据交互；
路由的配置和调用
- 一级路由；
- 嵌套路由；
- 默认路由；
- 路由传参；
- 路由接受参数；
- 路由跳转过程中的自动触发事件（如跳转路由前、路由切换成功后等，各个框架中的叫法不一样）；
- 404组件的路由匹配。
路由中要注意的问题：
- 调用方式。在我们Web的基础开发中，要切换页面中渲染的数据，有两种方式，一是通过超链接标签直接跳转，二是在某个异步操作的回调中通过JS完成跳转，所以各大框架中的路由调用都提供标签跳转和脚本代码跳转两种方式；
- 路由传参。参数暴露在url中和参数不暴露在url中。当然不同的传参方式对应了不同的接受参数的方式。
HTTP请求
- 安装和调用；
- 跨域的处理。
状态管理库
Vue: vuex;
React: mobx;
Angular: ngrx;
框架的UI框架
IView、Element-UI、Ant等