如何快速掌握一个ui框架

当今前端界，各类ui框架数不胜数，并且各个大厂家，都有一套本身的框架在那摆着，这让咱们前端开发者们情何以堪。如此多的前端ui框架，咱们该如何选择呢，如何快速掌握应用到实际开发中呢？特别是咱们新手同窗，刚开始接触框架时不是特别的理解，也不大会用。这即是咱们今天讨论的问题。

框架的意义

框架的意义，什么是框架的意义，是让你去想这个框架给咱们解决了什么问题，提供了什么帮助，为何选择框架？这个答案是显而易见的：

1. 统一性，选用一个Ui框架，这个框架会对样式进行统一，交互动画进行统一，这样就保证了咱们这个系统的完整性，也不至一个页面一个风格，让人家感受这是拼凑起来的同样。
2. 兼容性，所谓兼容，不是传统意义上的去兼容啥IE 6 7 8那些低版本浏览器，而是对主流的标准浏览器的兼容性，举个例子：一个checkbox复选框在IE上显示一个样式，谷歌上又是一个样子，火狐上又是一个样子，这个时候框架开发者们就会对它的样式进行统一，并兼容各类小问题。
3. 快速性，快速性很好理解，就是快速高效开发的意思，由于各类ui框架会封装不少咱们经常使用的各类组件，这样咱们就不用重复的去开发那些html结构和功能了。

使用框架

有了上面对ui框架的认识，那接下来确定是要使用框架，老前端开发自没必要说，我这里总结两个新手同窗常出现的问题：

1. 安装，这个问题几乎是新手同窗百分百遇到的问题，这个问题的缘由在于：由于如今的spa单页应用的开发，不像之前传统的开发，使用scripr标签src属性引入便可，而是使用npm安装，而后在进行注入，而后新手同窗们对此就很陌生了。我以为出现这个问题很重要的一个问题，是由于马虎，抛开国外的框架不说，像国内的框架，他们的框架安装上的使用说明，官网上其实都写得很详细得，并且是百分百适合国人阅读习惯得，而恰恰不少新手同窗却老是在安装上出现问题，各类报错，问题就是出在马虎,马虎得缘由就是不少同窗不去人家官网看，而是先去百度一通，搜出各类教程博客，搜出得那些教程博客，自己也不会有太多错，毕竟人家花心思写了，而是在你引入后忘记了注入或者缺乏了引入样式，好比：vue项目，你不仅要引入主框架(js文件)，主框架你还须要被vue.use()执行注入，还须要相应得引入css；angular项目(angular2以上)，引入主框架后，你须要在@NgModule({})里的imports属性里导入，注意，angular项目在ui框架样式文件和vue有那么丢丢差异，vue通常写在main.js里就能够了，而angular项目通常都会引入到项目里的全局css文件style.css,执行@import引入。

2. 组件的应用，安装好框架，就涉及到实际应用，在讲实际应用以前，先讲一下你们看现有项目会出现的状况，在看现有项目时，该项目里使用了某个ui框架，而后项目代码里各类陌生的属性，看着让人云里雾里，摸不着头脑，出现这种状况，首先一是对项目不熟悉，这个无可厚非，其次是由于你对应用这个ui框架里组件的属性和功能不了解所致。实际使用一个框架，不少新手同窗对于应用，都是把代码粘贴复制过去，却忽略了去看实际的使用说明或者看的不仔细，任何一个ui框架里的组件，官网里面都有对应这个组件的api，属性的做用，方法的调用，以及使用的注意事项。其实这个时候我更加建议新手同窗，先多花点时间去看这个组件的api,了解它的用法和注意事项，这样你在开发过程才会更加的事半功倍。
3. 框架的认识，每一个ui框架呢，都有一些本身特有的组件，说白了就是本身有，别人没有的，也正是由于这个缘由，在项目启动初期，在技术选型时，这也是对ui框架的一个选择标准，咱们须要它的某个功能来实现咱们的需求，固然也涉及到实际应用和可扩展性。说到组件，这里并不想去说各个框架特有的，而是想说你们都有的，由于你对这个的认识，将决定你对ui框架使用的熟练度，说白了就是你使用框架的段位在几级，初级，中级，高级，仍是大神级。我对ui框架里的组件分为这几大类型：

• 布局型组件：主要指栅格系统组件，layout布局组件等
• 基础型组件：主要指按钮，图标，字体，颜色等
• 导航型组件：主要指菜单，tab标签，分页控件组件，下拉列表组件等
• 表单型组件：input输入框，checkbox复选,radio单选，评分，日期，form表单等
• 对话框型组件：主要指确认对话框，信息提示框
• 数据视图组件：主要指table表格，list列表等

上面几个类型几乎是全部ui框架绝对都有的组件类型，惟一的差异有多是各个ui框架对该类型命名的不一样而已了，而功能也几乎同样，而全部组件都是封装出来的小组件，根据功能需求都会提供：**“属性，方法，事件”**这几个接口出来供咱们使用，所以咱们在调用组件时，对应的去查看它的api就OK了，使用也就如此简单了。

总结

本篇文章更多都是些理论知识，目的是帮助新手前端同窗们对ui框架的认识，不会辣么惶恐和惧怕，而ui框架应用的核心精髓其实就跟咱们掌握,js,jquery,vue,angular同样，耐心仔细的看他们的api，并适当的练习下小demo，相信你们均可以很快上手的。