基于Vue移植构建后台控制系统（三）

在了解了Vue全家桶之后，我们就拥有了快速开发的基础了，但是初涉者开始新的工程还是会比较艰难，至少效率会很低。此时，可以借用一些三方的模板来提高对Vue全家桶的熟悉程度——一方面可以学习对应的模块和代码组织结构，另一方面也可以直接进行复用。

一、Vue控制台模板

1.1 模板

在开始后台控制系统时，搜寻了几个较好的模板，以供参考使用：
https://github.com/sailengsi/sls-admin
https://github.com/lin-xin/vue-manage-system
https://github.com/vanishcode/iview2-management-system

1.2 学习复用

1.2.1 项目结构

vue-constructor.png

1、build、config：webpack编译配置文件；
2、dist：编译后文件；
3、src：项目功能源文件；
4、static：不进行编译的静态文件；

二、组件库

之前在Vue全家桶中，介绍过vue-router、vues和vue-axios，这些都是vue组件库。而且，除了这些组件库之外，还有很多第三方组件库，例如一中提到的例子中就有两个组件库——element-ui、iView。
第三方组件库，主要以UI组件库为主，根据需要适当引入有助于提高开发效率（一般选择性引入一个即可）。
其他一些第三方UI组件——http://www.jianshu.com/p/2e53c4454d8b

三、模块化组件

3.1 第三方库的缺点

虽然使用第三方UI组件可以提高开发效率，也可以在一定程度上统一控件风格，对稳定性也有一定的好处，但同时也存在一些缺点：

1、缺乏个性化定制；
2、引入过多控件增加代码量；
3、控件缺乏完整性；

3.2 自定义组件

关于Vue组件库，其实和常规的前端开发一样，对于较大型项目形成自有的组件库是势在必行的。
自定义组件要义：

1、统一规划，保证控件一致性；
2、模块化组织，灵活划分结构；
3、保证扩展，避免多余；
4、保证独立性、通用性；

3.2.1 统一规划，保证控件一致性
控件的一致性包括UI设计的一致性和接口设计的一致性。
UI设计的一致性不仅保证了界面风格的一致，也在一定程度上保证了控件的可复用性；而接口设计的一致性，一方面可以避免冗余控件的产生，另一方面也为多人协作提供了更多的方便和效率。

3.2.2 模块化组织，灵活划分结构
在进行模块化组织时，划分的细致性可以在最大程度上保证复用性，但是过度的细致，也会造成冗余控件的产生，从而导致自定义组件灵活性的优势荡然无存。所以模块化时一定要结合需求和功能进行综合考虑。

3.2.3 保证扩展，避免无用
在进行组件开发时，经常会做一些横向或纵向的扩展性开发。例如，需要一个日期选择控件时，会考虑同时开发一个时间选择控件，或者干脆做一个日期时间选择控件；这样固然有可能为以后的开发做好准备，但同时也可能永远也用不上，于是很容易落入一个无用功的陷阱（当然专门开发控件库例外）。在一个有限的项目中，要尽量做到按需开发，避免做出无用的控件，同时预留接口保证以后的扩展开发的可能性。

3.2.4 保证独立性、通用性
虽然自定义组件某方面是基于个性化的优势做出的选择，但同时却也不能忘记组件通用性的基本特性。一方面，可能以后其他的项目也会用到相关组件，另一方面也有可能随着项目的发展可以形成广泛应用的组件库呢？当然，有些组件的个性化限制了其通用性的可能，但是也可以进行相应的划分，尽可能将普遍性的部分独立出来，而个性化的部分则作为补充，如此就可以在一定程度上保证复用了。

四、总结

本篇主要介绍关于组件的开发和应用，在入门和初学阶段，要学会持续重构来形成对应的组件。
个人认为持续重构是一个程序员应该具有的基本素质之一。而这对于组件的开发也尤其重要，不仅可以减少代码冗余，保证扩展和复用，而且对于代码结构的清晰也有很大的好处。
组件库从来都不是一蹴而就的，而是在不断地重构中不断形成和完善的。