MVVM框架热门常用的组件库收集整理

在前端项目的开发过程中，少不了需要选择一款组件库作为项目开发的基础，而只要选择对了一款的合适的组件库就能极大的提升开发效率，直接让人体会到飞一般的感觉，简直爽的不要不要的。减少很多冗余的操作，和一些基础的代码整理，让开发更加快乐，让体验更加美好。

1.Vue常用的组件库

A.element-ui 

地址：http://element-cn.eleme.io/#/zh-CN
github地址：https://github.com/ElemeFE/element
配合使用的框架：Vue、React、Angular
github star指数： 33000 +
来源：国内

B.iview 

地址：https://www.iviewui.com/
github地址：https://github.com/iview/iview
配合使用的框架：vue
Github star 指数：18000 + 
来源：国内

C.Antd-design-vue

地址：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/
github地址：https://github.com/vueComponent/ant-design-vue
配合使用的框架：vue
Github star 指数：3000 + 
来源：国内，适合在经常在React下使用antd的开发人员

D.Vuestrap

地址：http://yuche.github.io/vue-strap/
github地址：https://github.com/yuche/vue-strap
配合使用的框架：vue
Github star 指数：4000 + 
来源：国外，适合在经常在使用bootstrap的开发人员

E.Vuikit

地址：http://yuche.github.io/vue-strap/
github地址：https://github.com/vuikit/vuikit
配合使用的框架：vue
Github star 指数：1200 + 
来源：国外，组件风格简洁扁平化

F.Vuetify

地址：https://vuetifyjs.com/zh-Hans/
github地址：https://github.com/vuetifyjs/vuetify
配合使用的框架：vue
Github star 指数：15000 + 
来源：国外且有中文版，在国外挺出名

G.Quasar

地址：http://www.quasarchs.com/
github地址：https://github.com/quasarframework/quasar
配合使用的框架：vue
Github star 指数：7900 + 
来源：国外且有中文版，组件种类丰富，在国外挺出名

H.Vue Material

地址：https://vuematerial.io/
github地址：https://github.com/vuematerial/vue-material
配合使用的框架：vue
Github star 指数：7300 + 
来源：国外，组件种类丰富，在国外挺出名

 

I.Mouse UI

地址：https://muse-ui.org/#/zh-CN
github地址：https://github.com/museui/muse-ui
配合使用的框架：vue
Github star 指数：7300 + 
来源：国内，组件种类丰富，偏清新多彩

附：常用vue移动端组件库

（1）Mint UI

地址： http://mint-ui.github.io/#!/zh-cn
star: 12000+

（2）YDUI Touch

地址：http://vue.ydui.org/
star: 2000+

（3）Vonic

地址：https://wangdahoo.github.io/vonic-documents/#/?id=vonic
star: 2900+

（4）Vux ( 移动端 )

封面占位图

地址：https://doc.vux.li/zh-CN/
github地址：https://github.com/airyland/vux
Github star 指数：14000 + 

（4）Onsen UI

地址：https://onsen.io/
github地址：https://github.com/OnsenUI/OnsenUI/tree/master/bindings/vue
star指数: 6900+

（5）Framework7

地址：http://framework7.cn/
github地址：https://github.com/framework7io/framework7
star指数：13000+
附：完美的HTML框架，构建精美的iOS & Android混合APP应用

 

2.React常用的组件库

 

A.Antd Design

地址：https://www.iviewui.com/
github地址：https://github.com/ant-design/ant-design/
配合使用的框架：react 
Github star 指数：36000 +
附：国内，有配合移动端使用的antd design mobile 组件库

B.Amaze UI React

地址：http://amazeui.org/react/
github地址：https://github.com/amazeui/amazeui-react
配合使用的框架：react 
Github star 指数：1500 +
附：国内，有配合移动端使用的组件库

C.有赞 UI

地址：https://www.youzanyun.com/zanui
github地址：https://github.com/youzan/zent
配合使用的框架：react 
Github star 指数：1300 +
附：国内，有配合移动端和微信小程序使用的组件库

 

D.微信的We UI  ( 移动端 )

地址：https://weui.github.io/react-weui/docs/#/react-weui/docs/page/0/articles/0
github地址：https://github.com/weui/react-weui
配合使用的框架：react 
Github star 指数：2300 +

E.React-bootstrap

地址：https://weui.github.io/react-weui/docs/#/react-weui/docs/page/0/articles/0
github地址：https://github.com/react-bootstrap/react-bootstrap
配合使用的框架：react 
Github star 指数：14000 +

F.Reactstrap

地址：https://reactstrap.github.io/
github地址：https://github.com/reactstrap/reactstrap
配合使用的框架：react 
Github star 指数：6500 +

G.Elemental UI

地址：http://elemental-ui.com/home
github地址：https://github.com/elementalui/elemental
配合使用的框架：react 
Github star 指数：4100 +

H.Semantic UI React

地址：https://react.semantic-ui.com/
github地址：https://github.com/Semantic-Org/Semantic-UI-React
配合使用的框架：react 
Github star 指数：8400 +

I.Material-UI

地址：https://v0.material-ui.com/#/
github地址：https://github.com/mui-org/material-ui
配合使用的框架：react 
Github star 指数：43000 +

3. Angular 常用的组件库

A.Angular Material

地址：https://material.angular.io/
github地址：https://github.com/angular/material2
配合使用的框架：angular 
Github star 指数：16000 +

B.Angular Ant Design

地址：http://amazeui.org/react/
github地址：https://github.com/NG-ZORRO/ng-zorro-antd
配合使用的框架：angular 
Github star 指数：4000 +
附：国内，适合习惯使用antdesign组件库的开发人员

C.Angular Bootstrap UI

地址：https://valor-software.com/ngx-bootstrap/#/
github地址：https://github.com/valor-software/ngx-bootstrap
配合使用的框架：angular 
Github star 指数：4400 +

 

D. primeNG

地址：https://www.primefaces.org/primeng/#/
github地址：https://github.com/primefaces/primeng
配合使用的框架：angular 
Github star 指数：4700 +