如何快速掌握一个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，相信大家都可以很快上手的。