Vue Webpack 组件化开发实践

两千年余前,子贡问为仁,子曰:“工欲善其事,必先利其器。居是邦也。事其大夫之贤者,友其士之仁者”——语出《论语·卫灵公》。时隔这许久,欲问从业者,何以堪高效之为事,有时以把妹(/泡哥)?也无非这十字而已,倘若体会得真切,U Get It。人们总是低估工具对自己心智模式的影响,请记住,好工具是好思想的容器;好工具也会蕴含好知识;对从业于纷繁杂乱前端的我等而言,这一点尤显重要;而 VueWebpack 在如今这时节,它所能带给你的,超乎你的想象。

vue-common-components

聊及这 vue, gulp, webpack,网络上已是充盈着对她们的溢美之词;笔者很是钟爱这vue,除过她简单易学,文档完善,对Angular React取长去短等等之外;更在于她双向数据绑定,数据驱动视图,如此沉重jQuery在不那么复杂的 SPA 中完全可以予以摒除;最兴奋的是户界面完全可以用嵌套的组件树来描述,再也不用写重复代码or拷贝(如果撸好组件封装),生活原来可以如此美好,这是我不得不欢喜非常。而且,她渲染极快;实现了 scoped ,防止组件样式污染;error/warn信息完善,易于调试;轮子丰富(vue-router、vue-loader...)功能强悍,基于依赖收集的观测机制,高效精准...... 在不就之后就要发布的 vue2.0,将更轻,更快! Virtual-DOM?Templates, JSX, or Hyperscript? 组件缓存?.....擦,好多东西需要学习!哇,好多好东西可以运用!痛并幸福着,生活就是这样。

先前在 Vue ES6 Jade Scss Webpack Gulp所历前端“姿势”更替记(其一) 两篇杂言中,分别叙述了如今撸起 SPA 的姿势即:VueES6JadeScssWebpack等一套组合,以及所经历的姿势变换历程;这 Vue 的使用确立了前端之路新的里程碑;而 GulpWebpack 的学习更使得对工具有了新的认识——只有你想不到,没有做不到。此一篇絮叨,是对过去 Vue + Webpack 组件化开发实践的一些总结和分享。

谈及分享这个,倒是很倾向信奉Linus Torvalds那句名言:Talk is cheap show me the code;所以有将所写的常用组件,有忝享于 Github,地址如是: https://github.com/nicejade/vue-common-components。伊始有用 gitbook 对如何使用这组件以作说明;后来鉴于仅仅说明不够明晰周到,干脆用 Vue 来实现一 SPA 专门承载组件 demo 以及 description,这能直观的了解组件用途以及表现,所以就有了 Vue Component Desc And Demo,其模样大致如下图:

vue-common-components-demo

对于组件的封装,因项目需求的差异,而各不相同;因此,这份尚在路上的组件库,并不是界定在工作生产环境予以作用,这也非分享的初衷(当然,如果需要这其中部分组件,直接拿来用未尝不可)。首先,可以用它作为 vue webpack es6 sass jade等入坑参考,借机体验这些联合来塑造出的组件化开发,或多或少会有所获。其次,也可以基于此对 vue 开发前端项目,做更为深入细节探讨;譬如组件设计,热加载,路由以及 vue2.0 那别致的 Virtual-DOM 等等。其更重要的在于,分享一种思维,为前端者,应该更多(*N)去学习去折腾,打造一套适宜的完善机制,优化开发工作流,提升开发速度;要知道只有在完成需求的基础前提下,才有时间去优化体验and学习更多;天下武功,唯快不破,这话不假!

上述言论,还有些补充;对于 vue 入门,这是一件非常容易的事儿;但到现实协作中开发,诸多东西都是挺需要探讨一番的;譬如使用 vue-resource 来替代 JQuery-Ajax;再比如 vue 虽然为组件style实现了 scoped,但这也存在局限(Eg: 如果 A 组件包含了 B 组件,A 的 scoped css 就不应该试图定义 B 组件内部的元素样式,这不能很好的工作);如此,解决 css 命名污染,CSS Modules(可参见CSS Modules 用法教程) 看起来是一个挺不错的解决办法,这就使得可以继续实践探讨的方向和必要。其次要谈及的是对工作流的设计,懒为要决,善用具器;这在vue-common-components,有些许推荐,也在持续探讨学习之中。

学习“知识”与“工具”,都理应重视,可须有重前忽后的道理?话说,计算机(抑或说知识)本身,即为工具。而这计算机所能认知的也就0和1(谁让流行起来的是双级管嘞),其上所衍生出的打孔,汇编,C,Java,Javascript 也都是计算机语言(不也是工具?);而前端所当需的JavaScript, Html5, Css 也好,流行的框架 React Vue 也罢,还是协助高效工作的工具诸如 Gulp Webpack Sublime Text Atom,理当学习,用之以精;争得时间,方有更多实践;何谓技术?不就是驾驭各种工具来解决实际问题的能力么?

加班学习&折腾,让明天更加高效;还是加班搞需求,让明天后天继续加班到更晚?如何抉择,这无关乎谁对谁错,这只是你的选择;请记住,好工具是好思想的容器;好工具也会蕴含好知识

Last Modify: @2016-07-06

原文出处: http://www.jeffjade.com
原文链接: http://www.jeffjade.com/2016/07/06/110-vue-webpack-component-develop/#


猜你喜欢(/有用)

对您可能有用(/感兴趣)的文章:

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

推荐阅读更多精彩内容