如果提到Angular与Vue的比较,不得不提的是Angular组件库的匮乏,相比之下,Vue的组件库可选择的面就广阔许多,而对于现在前端的开发来说,Vue框架提供的功能地位和JQuery很相似,都是在操控用户交互的动态效果。那么,就像当年我们用jQuery一样,其实在学会一些基本的JavaScript库的使用过程后,我们并不需要太多的去写Vue框架应用本身的代码,取而代之的是使用类似组件半成品的一些组件库,比如当年首先采用响应式的Bootstrap和Foundation,或是DOM操作的后起之秀SemanticUI等等,这些成熟、可定制的组件库让我们可以更多的把精力花在对产品的构建上,而不是永无止境的重复造轮子。
坦白说,当年用Bootstrap开发出一整套的网站页面,我甚至只学会JQuery这套js库中不到20%的知识,而且更多的代码并不在UI层面上,而是在Ajax请求上,但是使用的时候毫无违和感,用Bootstrap大块大块的抄代码,然后用它的栅格系统,用它的样式,需要的组件用它现成的功能库,拿过来就往页面上堆。这对一个偏于后端的程序员来说,实在是最高校节约学习成本的方式了。同样,Vue、React、Angular这类现代UI的应用框架,虽然说操作的思路由当年的DOM操作转向面向数据的操作,但是其实对我们来说,在应用层面上,我们并不希望纠结在这些复杂的逻辑应用上,还是更希望有一些类似Bootstrap或Foundation这样的功能库来快速的开发网站,而不是像当初从JQuery的DOM开始一个一个的自己造轮子。
所以我们来聊一聊现在流行的UI组件库,当然,仅仅是针对Vue,因为使用这些组件库,您可以在基本了解Vue的基础知识之后就可以用Vue这套框架来写UI了,而不需要您有太多的UI经验,用组件库,首先的好处是最快的出作品,其次的好处是能够最快的理解Vue框架应用的精髓,而实践的操作步骤,就是抄,省劲儿。
以下,我们来瞎掰一些最好抄的UI组件库。
首先,是我首推的UI组件库:Vuetify,也许您会问,为什么现在这么多人喜欢element,我不把element放前面,其实很简单,因为哥哥我是偏后端滴,所以我讨厌写样式代码,同样,我认为一套UI库如果需要自己写大量的样式代码,这个UI库就不能算一个裤,就只能算一条裤衩,element就是这么样的一条裤衩。
1.Vuetify:
到Vuetify的官网去看看就知道了,这个UI库几乎涵盖了你所需要的组件,而且语义化的组件,同时官网上有大量的样例代码,实际上,在应用的时候,只要把布局代码、Vuex和路由自己写写,剩下的几乎就是直接抄过来填空就行了,最好用的是他们的响应式做的非常不错,和Bootstrap、Foundation在应用上非常像,非常适合我们这种懒人。
其次,Vuetify的webstorm支持非常好,这样就不会出现一堆绿波浪线,虽然无伤大雅,但是有些IDE不支持的组件在那碍眼,对于我们这种有强迫症的人来说真的很不爽,Vuetify做的就很不错,图标支持四种图标库,包括最流行的FontAwesome,都是一些通用的组件,效果也不错,支持自定义主题,同时颜色的选择有一个颜色库,这是我最喜欢的地方。
2.Bootstrap-Vue
把原先jQuery实现的Bootstrap组件再用Vue实现一遍,应该说这个库做的还不算很完整,但是样式的不足之处可以和Bootstrap无缝拼接,可是有些内部组件样式不太好调整,稍微丑了点,勉强过得去。组件少了写,拿来写后台还行写前台有些勉强。这个库最大的优点是通用性好,比如表格组件,几乎不用修改结构代码,只要修改fields数据,然后其他就可以原封不动的重复使用排序、检索、分页等功能,但是因为通用性高,所以代码的逻辑就会有些复杂。12网格布局,可以任意的嵌套到Bootstrap中,不会出现嵌套的冲突,这对于喜欢用Bootstrap来说就很方便了。
3.Vue-blu
一个针对PC端的中后台产品很不错的选择,样式很漂亮,写验证逻辑什么的都很方便,就是组件内容稍微少了点,另外,这个库暂时还不支持Vue-Cli3,这对新项目有些要命,因为如果要用Vuecli3写项目,那就要修改webpack文件,老是讨厌了,要么,你就要把所有支持Vuecli3的所有插件先装好,再用npm i来安装它,不过npm安装完vue-blu之后,您不修改webpack就没法用vue add的其他工具库了,当然,其他工具库可以继续npm i来安装就是,只是老是时不时的冒点小问题出来,会比较头疼。
4.MintUI
和vue-blu类似,不过主要是针对手机端应用,同样暂时不支持vue-cli3,组件库的内容也大同小异,就不啰嗦了。
5.Vue-strap
如果用bootstrap-vue不习惯,可以试试这个,也是基于bootstrap样式库的。
6.其他
当然,用会上面的库中其中的一两套,再用其他库就没什么太大难度了,在应用上都差不多,顺便也吐槽一下现在很热门的element,主要是以下几个原因:要自己写太多样式代码,如果连布局元素都要自己写样式代码,实在是没有使用组件库的意义,响应式做的不好,我不想专门为手机和PC写两套UI,但是用element很难做到,再者,整个数据的应用的API设计的偏复杂,感觉不够清晰。其实主要原因就是不好抄,抄一个组件我自己就要填一堆代码,一堆样式,对我这懒人来说是真不喜欢。
其实,对我来说,选择一套UI库,布局元素是首要的考量要素,因为只有布局的组件做的好了,才能在一个整体的脉路下进行UI设计,如果一套UI布局都做的含含糊糊,那么就是说撘一个大体模型的时候就需要大量的细节工作,那就浪费时间了。因为,每一个组件库的组件内容基本大同小异,但是布局组件使用方便了,其他就是堆积木的过程,当然,这种思维的前提是,我不是专业写UI的,我只想快速的拿出个可以用的软件。