欲先利其器，必先利其器，这是此博客一大倡导；关于如何优雅地去写好 Vue，工具自是首当其冲要提及的，毕竟这非常重要；在你选择使用 Vue 来从事前端开发的那一刻，你已经同意的这一论点：毕竟 Vue 也是用原生 Js 写的，Js 则是用 C 语言写，而 C 又是汇编写的..... 这不再是刀耕火种的年代，而你也未用汇编或 C 来解决你的需求，So，你是同意的。既是赞同的，岂有不用好它的道理？那么来一起探讨下：
1.外设
：除了那些舒适坐骑与书桌外，双屏显示器，Mac 则是必备外设装备；你知道，一屏编辑器中写着代码的同时，就能在另一屏 Chrome 下看到表现，这很高效便捷，也令人很是舒服。而 Mac 这设备中堪称优雅情人的存在，更是居家良品。倘若，所处的工作环境没那么看重效率，或者未表现出该有的慷慨，则一定须善待自己的精力和时间，勇于将自己的开发环境打造精良；倘若你被在使用 Winodws，不妨读下之前总结的 Windows下效率必备软件。
2.软件
：身为开发人员，你电脑以及其中配备的软件，就好如武士手中的利剑，是助你大杀四方的存在；所以无论是用它来玩一玩恶作剧，还是来致敬把Dota，抑或是搞搞需求，皆十分有必要将其锋利化。因此，诸如 Alfred，Brew，Iterm2，Oh-my-zh，Git等必备就不说了；对于前端开发，编辑器与浏览器的配备与运用，尤其重要（对于这一点很多前端开发者，尚未达到及格，一如其水平）；对于浏览器，只推荐 Chrome，不只是浏览或者调试，更在于其搜索。而编辑器则推荐 SublimeText3 与 Atom；业界有人认为 Vscode 也不错，这有待写篇测评；不推荐使用 WebStorm，因为其除了反人类的操作设计外，感受不到其他可记住点。对于 SublimeText 与 Atom，曾经有写过 如何优雅地使用Sublime Text，新编码神器Atom使用纪要，时至如今，也挺有参考价值。
3.周边
：使用 Vue 开发开发前端，当须保持对周边工具体系，经常保持关注，比如Node，Npm(Yarn)，Webpack，Gulp等，以及Lodash，superagent，d3等工具库，再有就是 Vue 系本身具库，譬如 Vue-cli, vue-router等辅助；再有就是不断衍生出来的 Vue 插件扩展。Atwood定律中阐述到：Any application that can be written in JavaScript, will eventually be written in JavaScript.(翻译过来即是：凡是能用JavaScript写出来的，最终都会用JavaScript写出来)。这个理论同样适用于 Vue，它简易强大的存在，吸引了很多超厉害的开发者或团队，为其贡献了无数好用的组件库。比如: 饿了么出品的Element-UI，还有 vue-echarts，vue-multiselect ...... 具体可以参看awesome-vue，略睹
如何漂亮使用 Vue 之基础篇
软件工程学，作为程序员，本就该是当学好的一门技艺。像代码大全2以及程序整洁之道，一定是需要好好读一读的。Web 前端开发，因其入门的容易性(还有需求的旺盛)，造就了这一行涌进了不少急功近利者，也惊现了很多令人“不堪卒读”的代码。而前端发展日新月异，如不能渐而掌握，长期来看，委屈的倒也不全是别人(读你代码者)，更是自己；举个浅显的例子来讲，如不能学会很好的组织代码结构，即便有高手写了架构，一旦项目渐大，不也是照样面临被自己坑苦的凄楚？事实上，不乏很多开发者，未能养成很好的编码素养，基础如变量方法命名，也是能令人心惊肝颤；很显然这是损人不利己的行为，势必当善之。
对于团队来讲，Eslint 实在是需要配备的利器；既然难以保证每个人都很有素养，那么必须适当强制；至少避免了丛生些杂乱不堪的代码，以乱军心。当然，使用伊始，总会有些人不太适应，所以玩转编辑器的重要性，就再次体现出其价值了；由此也引出了自动化(半)工作流的话题了，这在之后的内容中会加以探讨。
前端基础技术，从事前端开发，长久之计来看，基本功是非常重要的；尤其是 JavaScript；这在写 Vue 时候，也体现的比较明显。其他如 Html，Css，自然不用说；除此之外，Scss 等预处理器，也是当学习并加以运用，以提升开发效率，节省开发成本；毕竟只有节省出充裕的时间来，才会去做更多优化，节约出更多精力与时间，一个优良的循环就此得以形成。
Vue 基础，这一点很重要，熟读Vue.js 官方教程，再没有比这更好的教程了；根据之前经验来看，心急是吃不到热豆腐的，欠下的也终究得还；至少起初需通读之，否则遇到问题，无法及时定位出在哪儿查究，这无疑会浪费更多时间。除此之外，Github 上找一份好的微型项目，认真读下，可以发掘出很多值得学习的玩法。
善用配置，《代码大全》第 18 章，讲到表驱动法（Table-Driven Methods），对于编程从业者，很有必要一读。很多时候，可借助查询表来加以简化逻辑和继承树关系。这在团队协作，分模块开发模式具有更非凡价值；应该善用配置，将各个模块予以抽离，使得相互间不存强依赖，如此开发环节也大大的避免代码冲突。譬如，了解 JavaScript 特性，即可做如下写法：
这样即可写出便捷的 Icon Component，使用时只需添加新 Svg 入 assets，然后引用 icon 时填写对应 Svg 名字即可，十分方便；推此及它，我们可借助这样配置，去分解、组合各个模块，甚是方便。
Vue有三大特性，十分令人欣喜；一是其数据的双向绑定，即：通过数据绑定链接View和Model，让数据的变化自动映射为视图的更新。另一个是其数据驱动的组件系统，即：用嵌套的组件树来描述用户界面(而一个组件恰恰可以对应MVVM中的ViewModel)，其三是基于构建工具的单文件组件格式，即其所提供了强大的loader API，来定义对不同文件格式的预处理逻辑，从而让我们可以将CSS、模板，甚至是自定义的文件格式等，当做JavaScript模块来使用，极大提升了代码的可复用性；Webpack 基于loader还可以实现大量高级功能，比如自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换等等。当然 Vue 还具有其他若干令人击节赞叹的设计，这些我们可以参见 Vue 作者尤雨溪的文章：Vue.js：轻量高效的前端组件化方案。
鉴于此，如果可以很熟练的掌握其数据的绑定与传输，组件的开发，以及周边 Webpack 等相关配置，则能将运用水平视为进入了一个新的层次。据以往经验来看，这不是一件容易的事儿，毕竟使用这 Vue 也是冲着解决需求去了，而非在搞研究。谁能说开车上路的司机，能了解关乎车的所有？相信，接下来的很长时间里，都须对这几方面加以学习、探索，然后加以利用。
如何漂亮使用 Vue 之实战组件篇
Vue 一大特色是用嵌套的组件树来描述用户界面。所以组件的设计与编写至关重要；至少要保证她是易于修改和维护，可复用性和可读性高，耦合度低，接纳团队合作性开发... ... 诸此等等。项目一旦庞杂，更得事先考虑好整个架构的设计，使其清晰合理；组件缓存的使用、避免过重组件的衍生 ... 。而 Vue 组件系统又是有数据所驱动，更得兼顾数据在各种组件间通信，避免数据被多方操作，Bug 难以定位等问题。
这是一个须长期积淀的技能，非朝夕可至。但，部分内容只需刻意关注，即可见其成效的。比如，简明且见名知义的命名，良好的编码规范，团队统一编码风格，以保证代码的可读性。运用设计模式原则，比如单一职责原则，将组件拆分抽离成更细粒度，保证组件功能单一，以提升组件复用行；再如接口隔离原则，采用稳定的服务端接口，将变化模块分离，使得组件得以解耦；在复杂的项目中，也是需要用到冗余、继承，这时候也需要关注下里氏替换原则、依赖倒置原则... 。另外还当学习 Vue 本身所提供的优化，像路由懒加载, 即：结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载，使得该组件访问时才加载，以提升页面加载效率，还有利用服务端实现首屏渲染，组件缓存等等，尤须注意的是组件间数据通信，这在之后一节中会提及，此处不做赘述。
这里需要学习探究的点很多，非片言可蔽之，看到一份 PPT Vue.js实践: 如何使用Vue2.0开发富交互式WEB应用；个种谈到 Vue 许多相关的点，值得一览。另外，如是为团队写公用组件，一定记得附上对应使用文档，这很重要。你看，如上所说，要写好一手漂亮 Vue(代码)，软件设计学问，是少不了的存在，不是么？
如何漂亮使用 Vue 之实战通信篇
早先有在Vue 各类数据绑定一文中，对 Vue 数据绑定有过些描述(version 1.*)；虽然如今 Vue 早已升级至 2.*，不过数据绑定变化虽多，但大局影响不大，譬如：不再允许片段实例；须以v-html取代三 Mustache 语法；变更 v-for 遍历时参数顺序等等，具体可参见从 Vue 1.x 迁移。此处就数据在 vue 组件间传递做下探讨。
Vue2 移除 $dispatch() 和 $broadcast()之后，主要通过 prop(包括 v-model 自定义) 实现父组件向子组件传参，且只能单向传递；为了防止对父组件产生反向影响，Vue2 已移除了 .once 和 .sync 修饰符，子组件需要显式地传递一个事件而不是依赖于隐式地双向绑定。 一旦你试图在组件内，直接修改通过props传入的父组件数据，这将被认为是anti-pattern的，报以下错误：
但，如果传递的 prop 本身是引用型传递，像对象或者数组，由于数据类型自身特性，无论是什么绑定方式都会是双向绑定！这些在Vue文档－单向数据流中有作说明；请看这个例子：
这里需要留意的是：Vue 要么监听的是基本数据类型的值变化，要么监听的是引用数据类型的引用变化；因此，vue对于数组，才自己封装了一套方法（包括 $set , $remove），如果直接变更引用类型的内容，即便数据已经修改，但 Vue 是感知不到的，所以视图将不会更新（针对性的对属性进行赋值操作，则会调用其属性的 set 方法，因此Vue会得到感知，从而驱动视图更新）。这里需要补充的是：Vue 使用 Object.defineProperty（ES5特性）将数据转为 getter/setter，从而实现对数据的 watcher，setter被调用时重新绘制关联的 Dom，从而刷新视图。
所以，对父组件传递来引用型数据，如需更改，最好改动做深度拷贝后的数据，而且需要注意得失，Object.assign不是深度拷贝，即便采用了 Object.freeze() 去冻结。对于子组件向父组件回传参数，可借助 $emit，当然也可以使用 callback Functon，可参见jsfiddle 示例。非父子组件间通信，Vue 有提供 Vuex，以状态共享方式来实现同信，对于这一点，应该注意考虑平衡，从整体设计角度去考量，确保引入她的必要。当然，Vue 也提供了 $refs，可以跨层调用，或者诸如这样 this.$parent.$parent ；提供了不代表推荐；尽量少的去运用，除非逼不得已，或者去恶作剧坑人。当然，也可借助原生Api sessionStorage, localStorage 等等进行数据存储，以到达通信目的；对于，兼顾得失，争取扁平统一化通信方式就好。鉴于篇幅，就不多赘述。
如何漂亮使用 Vue 之Webpack篇
前文提到，推荐使用Vue-cli，它已然帮助我们贴心的配置好了 Webpack 相关。在编写 router 配置之时，可以轻松实现路由组件的懒加载，使得项目可以拆分成若干个 js 小包，和一个略大的 vendor，运行时按需去加载。即，我们可以像如下用法，去配备路由组件（当然，我们也可以把组件按组分块）：
DllReferencePlugin
除此之外，在 webpack 这块，还是有非常多东西需要去优化，以缩短包构建的时间、改善其体积等等。比如可利用，DllReferencePlugin 将常用不怎么变更的文件，抽离出来打入另一统一的文件(vendor.dll.js)， 外链以 script 引入。这个网上教程很多，此不赘述。也可参见这个项目 jade-blog 来配置。如此一来，可加速开发构建时间。
webpack-bundle-analyzer
最新 Vue-cli 还帮着注入了 webpack-bundle-analyzer 插件（Webpack插件和CLI实用程序），她可以将内容束展示为方便交互的直观树状图，让你明白你所构建包中真正引入的内容；我们可以借助她，发现它大体有哪些模块组成，找到错误的模块，然后优化它。我们可以在 package.json 中注入如下命令去方便运行她(npm run analyz)，默认会打开 http://127.0.0.1:8888 作为展示。
在引入了 DllReferencePlugin 插件后，想必会在 webpack.dll.conf.js 中将 vue 加入进去；例如进行了如下配置：
当你使用 webpack-bundle-analyzer 去分析时，你会发现 Parse Size 为 71 KB 的 vue.common.js，会出现在 vendor.xxx.js 中，按预想它不是应该被打入 vendor.dll.js 中的？谈及这里，为了保证文章的完整性，不得不提下，vue2 经过 2.2 版本升级后, 文件变成了 8 个，分别是:
这在Vue2 dist 目录下各个文件的区别, 可以浏览。另外，vue 文当独立构建-vs-运行时构建，也阐明了两者区别；这 vue.common.js 隶属独立构建产物，而默认 NPM 包导出的是 运行时 构建，为了使用独立构建（支持 template），在 webpack 配置中添加下面的别名：
如此一来，在 webpack.dll.conf.js 配备中注入 vue，导致 vendor.xxx.js 中出现 vue.common.js，就能够得到解释了：dll 中对 vue 打包配置，与 resolve 中引入有出入，前者默认为运行时构建。如能保证是一致了，此问题即可解决。这一点，有经过测试，得出数据如下(resolve 配置如上)：
两者比较，vendor.xx.js 相差 +71 KB，正是 vue.common.js Parse Size；vendor.dll.js 相差 -27KB，即运行时构建所得大小。打开生成的
vendor-manifest.json，也会发现，前后生成 vue 相关的引用分别是：
以上很多经验，多是受教于我司前端大神 @solodu，在此深表感谢
732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
