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

四、总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,270评论 25 707
  • 恒诚自用2=01 282期80开302对 283期31开154对 284期43开618对 285期57开977对 ...
    A恒诚阅读 111评论 0 0
  • 有没有觉得这藤让人惊艳,好看得跟假的似的?我其实也叫不出它的名字,因为当初它只是我和姐姐爬山时随手采来的一根野藤。...
    流年飞萤阅读 238评论 0 2
  • 你若安好便是晴天! 你好吗? 好久没与你谈心, 你怨恨我吗? 我多么愿你不远万里朝我奔来。 你是否期待着与我相见?...
    追风筝的小小郭阅读 159评论 0 0
  • 你真的还爱我吗?还是只是觉得自己不想自己一个人呢? 胖子,今天陪我亲生父母一整天,直到他们住房,都...
    兰栀阅读 130评论 0 0