小程序ui指南

痛定思痛。 2021-12-16 20:39 280阅读 0赞

移动端、PC端（前后台）、小程序常用的UI框架  
1.移动端UI库

①.Vant UI  
官方地址：[https://youzan.github.io/vant/\#/zh-CN/intro][https_youzan.github.io_vant_zh-CN_intro]  
github地址：[https://github.com/youzan/vant][https_github.com_youzan_vant]  
优点：用来做移动端商城很不错，支持定制主题，社区还算活跃

②.Mint UI

官方地址：[http://mint-ui.github.io/\#!/zh-cn][http_mint-ui.github.io_zh-cn]

github地址：[https://github.com/ElemeFE/mint-ui/][https_github.com_ElemeFE_mint-ui]

优点：饿了么团队制作，组件比较丰富

缺点：已经很久没人维护，也没人接盘了

③.Muse UI

官方地址：[https://muse-ui.org/\#/zh-CN/usage][https_muse-ui.org_zh-CN_usage]

github地址：[https://github.com/museui/muse-ui][https_github.com_museui_muse-ui]

优点：PC+MOBILE一套就够了

④.Nut UI

官方地址：[https://nutui.jd.com/\#/start][https_nutui.jd.com_start]

github地址：[https://github.com/jdf2e/nutui][https_github.com_jdf2e_nutui]

优点：京东团队制作，质量有保障

缺点：组件不是很丰富，需要踩坑。  
2.PC端前、后台UI库

①.Element UI

官方地址：[http://element-cn.eleme.io/\#/zh-CN/component/installation][http_element-cn.eleme.io_zh-CN_component_installation]

github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

优点：团队给力，社区活跃，组件丰富

②.vue-element-admin

演示地址：[https://panjiachen.github.io/vue-element-admin/][https_panjiachen.github.io_vue-element-admin]

github地址：[https://github.com/PanJiaChen/vue-element-admin][https_github.com_PanJiaChen_vue-element-admin]

博客系列教程地址：[https://segmentfault.com/a/1190000009275424][https_segmentfault.com_a_1190000009275424]

优点：前人造轮子，拿来直接用就可以

③.iView UI

官方地址：[https://www.iviewui.com/docs/guide/install][https_www.iviewui.com_docs_guide_install]

github地址：[https://github.com/iview/iview][https_github.com_iview_iview]

优点：样式好看，坑不算多，有自己的生态，比较稳定，同一作者写的后台iView-admin  
3.小程序UI库

①.iView Weapp

官方地址：[https://weapp.iviewui.com/docs/guide/start][https_weapp.iviewui.com_docs_guide_start]

github地址：[https://github.com/TalkingData/iview-weapp][https_github.com_TalkingData_iview-weapp]

优点：整体包结构比较小，样式比较美观

缺点：暂不支持npm安装

②.Wux Weapp

官方地址：[https://wux-weapp.github.io/wux-weapp-docs/\#/quickstart][https_wux-weapp.github.io_wux-weapp-docs_quickstart]

github地址：[https://github.com/wux-weapp/wux-weapp/][https_github.com_wux-weapp_wux-weapp]

优缺点同iView Weapp

③.Wuss Weapp

官方地址：[https://phonycode.github.io/wuss-weapp/quickstart.html][https_phonycode.github.io_wuss-weapp_quickstart.html]

github地址：[https://github.com/phonycode/wuss-weapp][https_github.com_phonycode_wuss-weapp]

优点：支持npm安装，组件较丰富

④.Color UI

官方地址：[https://www.color-ui.com/][https_www.color-ui.com]

github地址：[https://github.com/weilanwl/ColorUI][https_github.com_weilanwl_ColorUI]

优点：样式超级超级超级好看啊，不信他不火

缺点：文档还在编写中，组件目前不是很丰富

⑤.Vant Weapp

官方地址：[https://youzan.github.io/vant-weapp/\#/intro][https_youzan.github.io_vant-weapp_intro]

github地址：[https://github.com/youzan/vant-weapp][https_github.com_youzan_vant-weapp]

优点：支持npm安装，组件丰富，合适做商城类小程序

⑥.MinUI

官方地址：[https://meili.github.io/min/docs/minui/index.html][https_meili.github.io_min_docs_minui_index.html]

github地址：[https://github.com/meili/min-cli][https_github.com_meili_min-cli]

优点：蘑菇街团队开发维护，样式中规中矩

缺点：组件现在也不算太多

非结语：UI组件库的使用，不仅要看样式展现，更要看库的维护和生态，前人的轮子有时候也不一定适合项目，去尝试造轮子会发现一个不同的世界。

结语：不定时更新，不足之处或者有其他优秀的UI库可以留言私信我，自己喜欢的UI库也可以上墙！  
欢迎体验由我个人开发的高颜值云开发工具小程序

[https_youzan.github.io_vant_zh-CN_intro]: https://youzan.github.io/vant/#/zh-CN/intro
[https_github.com_youzan_vant]: https://github.com/youzan/vant
[http_mint-ui.github.io_zh-cn]: http://mint-ui.github.io/#!/zh-cn
[https_github.com_ElemeFE_mint-ui]: https://github.com/ElemeFE/mint-ui/
[https_muse-ui.org_zh-CN_usage]: https://muse-ui.org/#/zh-CN/usage
[https_github.com_museui_muse-ui]: https://github.com/museui/muse-ui
[https_nutui.jd.com_start]: https://nutui.jd.com/#/start
[https_github.com_jdf2e_nutui]: https://github.com/jdf2e/nutui
[http_element-cn.eleme.io_zh-CN_component_installation]: http://element-cn.eleme.io/#/zh-CN/component/installation
[https_github.com_ElemeFE_element]: https://github.com/ElemeFE/element
[https_panjiachen.github.io_vue-element-admin]: https://panjiachen.github.io/vue-element-admin/
[https_github.com_PanJiaChen_vue-element-admin]: https://github.com/PanJiaChen/vue-element-admin
[https_segmentfault.com_a_1190000009275424]: https://segmentfault.com/a/1190000009275424
[https_www.iviewui.com_docs_guide_install]: https://www.iviewui.com/docs/guide/install
[https_github.com_iview_iview]: https://github.com/iview/iview
[https_weapp.iviewui.com_docs_guide_start]: https://weapp.iviewui.com/docs/guide/start
[https_github.com_TalkingData_iview-weapp]: https://github.com/TalkingData/iview-weapp
[https_wux-weapp.github.io_wux-weapp-docs_quickstart]: https://wux-weapp.github.io/wux-weapp-docs/#/quickstart
[https_github.com_wux-weapp_wux-weapp]: https://github.com/wux-weapp/wux-weapp/
[https_phonycode.github.io_wuss-weapp_quickstart.html]: https://phonycode.github.io/wuss-weapp/quickstart.html
[https_github.com_phonycode_wuss-weapp]: https://github.com/phonycode/wuss-weapp
[https_www.color-ui.com]: https://www.color-ui.com/
[https_github.com_weilanwl_ColorUI]: https://github.com/weilanwl/ColorUI
[https_youzan.github.io_vant-weapp_intro]: https://youzan.github.io/vant-weapp/#/intro
[https_github.com_youzan_vant-weapp]: https://github.com/youzan/vant-weapp
[https_meili.github.io_min_docs_minui_index.html]: https://meili.github.io/min/docs/minui/index.html
[https_github.com_meili_min-cli]: https://github.com/meili/min-cli