Vue.js组件化开发
Vue.js组件化开发
所谓组件化开发,就是将各个不同的view和业务逻辑封装到不同的component
中,component
的粒度可大可小,举例来说,在一个电商首页中,你可以把轮播图
看做一个component
,把运营活动
当做一个component
,把热门推荐
也看做一个component
,这样的好处是,在不同的组件中开发展示效果和业务逻辑,就形成了我们常说的高内聚,低耦合
。当然从更大的层面来说,你又可以把整个首页当做一个component
。对component
粒度的把控需要我们根据项目的实际情况作出选择。粒度过大或者过小都不利于我们的可持续开发。
我们在之前的学习中,也自定义过自己的组件,也就相当于封装的过程。封装的直接好处就是可复用。现在的开源社区中,可供选择的vue.js UI组件库非常多,我们可以直接拿来使用,减少了重复找轮子的过程
。在这里,为大家推荐几款组件库,如果要拿到正式项目中使用,那么就需要涉及到技术选型
。
我们以开发移动端项目为例:
我们在github
上搜索vue mobile
,选取1k star
以上的项目,大概就这么几个:
按照技术选型的思路,我们对以上项目进行比较:
以公司名义开源的项目如下:
- mint-ui
- cube-ui
- vant
- weex-ui
其中,mint-ui是饿了么开源的,cube-ui是滴滴开源的,vant是有赞开源的,weex-ui是阿里飞猪团队开源的。
需要特别指出的是,饿了么还开源了的一个面向后台的桌面端组件element
,weex
项目是跨三端的项目,我们也可以拿来仅仅开发web端。vant适用于电商项目,之说以这么说,是因为vant除了基础组件,还有一些适用于电商项目中的业务组件。cube-ui的组件还不是太多,不建议使用。以上项目,都有自己的公司的主题色,我们在集成时,可以修改成自己公司的主题色。
目前社区最火的项目:
- vux
- mint-ui
vux是社区主导的项目,文档完善,贡献代码的开发者非常多,更新比较频发。以WeUI
为参照,开发的适用于微信端的组件库。star高达11k
。可以看出,这个项目被使用的还是相当广泛的。
mint-ui给我的感觉是,组件的设计并不是那么好看,如果我来选择的话,是不会选择将mint-ui集成到正式项目中的。
综合以上分析,我们可以这样认为,如果是开发移动端项目,选择应该是这样的:
如果是普通项目,首选vux。
如果是电商项目,最佳选择是vant。
如果开发weex项目,应该选择weex-ui。
开发
我们使用vux
来开发一个移动端的网易云音乐项目。