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

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 +

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐