Vue+Webpack组件化开发实践

Vue

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

聊及这 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 的姿势即：Vue、ES6 、Jade 、Scss、Webpack等一套组合，以及所经历的姿势变换历程；这 Vue 的使用确立了前端之路新的里程碑；而 Gulp，Webpack 的学习更使得对工具有了新的认识——只有你想不到，没有做不到。此一篇絮叨，是对过去 Vue + Webpack 组件化开发实践的一些总结和分享。

谈及分享这个，倒是很倾向信奉Linus Torvalds那句名言：Talk is cheap show me the code；所以有将所写的常用组件，有忝享于 Github，地址如是： https://github.com/nicejade/vue-common-components；伊始有用 gitbook 对如何使用组件以作说明；仅仅说明这显然不够清晰，后来干脆以Vue来实现之，这还能更好的呈现组件表现，所以就有了 Vue Component Desc And Demo，其模样大致如下图：

对于组件的封装，因项目需求的差异，而各不相同；因此，这份尚在路上的组件库，并不能很好在生产环境起些作用，这也非分享的初衷（当然，如果需要这部分组件，直接拿来用未尝不可）。然而，这也不能说明它毫无用处；