前端开发：如何写一手漂亮的 Vue

前几日听到一句生猛与激励并存，可怕与尴尬同在，最无奈也无解的话：“90后，你的中年危机已经杀到”。这令我很受触动。显然，这有些夸张了，但就目前这日复一日的庸碌下去，眨眼的功夫，那情形就会在这骨感的现实面前，悄然的被显现。因此，愈加体验到，当必要有计划的去作，去写，去玩，去嗨，利用好这荷尔蒙分泌还算旺盛的时光，去厚积去博取，去发现去折腾；让本身的生命不在仅是工做与惆怅，还有时间分与“诗和远方”。不用分析，就知道这该如何去作，高效去完成工做，而后去学着优雅地生而活。目前犹身为前端开发者，且在使用 Vue，那么就有了此文；这不只是纪录或分享，也是在漫漫之路上下求索，更但愿能探讨和指点，以资见识，提高其效。

微注： 早先在写[如何优雅地使用Sublime Text]时候，先后历经10月，至今虽不断更新犹在，离该话题也是相去甚远。因此，谈及此一个宽广话题的存在，欲一谈也须深刻研究，非朝夕可至；因此本篇将采起不按期更新，固然，这么作，也是治疗自身拖延症之一法子；另外也是限制聚合网抓取的一种尝试。 
更新： 对于如何构建 VueJs 项目，天然推荐官方的脚手架 vue-cli 
；而对于微小型项目，我的倒挺看好poi —— (Delightful web development)，它能让你十分便捷的使用当前流行的框架（Vue React等）。即使如此呢，不少业界朋友，对 Vue 项目的构建，仍是不尽如人意；鉴于此，有根据过往的些许经验，设计出一套样板 ——vue-boilerplate-template，以供参考，固然也期待朋友给予指正。其中已经依赖了vue-router 
、vuex、 vue-i18n、 element-ui、 bootstrap 诸多库；也注入了 webpack、 Eslint、 pre-commit等等便捷开发相关的库。其中对与后台接口调用与使用，vuex 的运用，视图结构的塑造，路由和多语言的配置，公共方法的调度，webpack打包优化等等，都基于便捷开发的前提下，作了相应的设计，但愿有缘人会喜欢；这一番设计原因，得空会另起一篇文章予以阐明；而这番设计也会，在不断的学习中持续改进，敬请期待

随言: 身在程序的江湖，如你是一位即将出征武士，对决于浩瀚无尽的需求大军；那么你不只须要一副好的体格，还须要一身技艺：而这软件工程学 
(抑或加算法)就比如内功（查克拉）；而所使用的各家语言 
，则好如武学招式（独孤九剑？）；那加以利用的各类工具，当如随身利器（小李飞刀？）；那属于本身一套极致开发流程，即是轻功（电光神行步？）……如是斯言，那么做为开发者的你，几技傍身耶？ 
如上随言，此篇准备从如下几个方面来探讨：

如何漂亮使用 Vue 之工具篇

欲先利其器，必先利其器，这是此博客一大倡导；关于如何优雅地去写好 Vue，工具自是首当其冲要说起的，毕竟这很是重要；在你选择使用 Vue 来从事前端开发的那一刻，你已经赞成的这一论点：毕竟 Vue 也是用原生 Js 写的，Js 则是用 C 语言写，而 C 又是汇编写的….. 这再也不是刀耕火种的年代，而你也未用汇编或 C 来解决你的需求，So，你是赞成的。既是赞同的，岂有不用好它的道理？那么来一块儿探讨下：

外设：除了那些温馨坐骑与书桌外，双屏显示器，Mac则是必备外设装备；你知道，一屏编辑器中写着代码的同时，就能在另外一屏 Chrome 下看到表现，这很高效便捷，也使人非常舒服。而 Mac 这设备中堪称优雅情人的存在，更是居家良品。假若，所处的工做环境没那么看重效率，或者未表现出该有的慷慨，则必定须善待本身的精力和时间，敢于将本身的开发环境打造精良。

软件：身为开发人员，你电脑以及其中配备的软件，就好如武士手中的利剑，是助你大杀四方的存在；因此不管是用它来玩一玩恶做剧，仍是来致敬把Dota，抑或是搞搞需求，皆十分有必要将其锋利化。所以，诸如 Alfred，Brew，Iterm2，Oh-my-zh，Git等必备就不说了；对于前端开发，编辑器与浏览器的配备与运用，尤为重要（对于这一点不少前端开发者，还没有达到及格，一如其水平）；对于浏览器，只推荐Chrome，不仅是浏览或者调试，更在于其搜索。而编辑器则推荐 SublimeText3与 Atom；VsCode也很棒的存在，写前端后台都十分趁手(目测 Google 也都力推之)；不太推荐使用 WebStorm，由于其除了反人类的操做设计外，感觉不到其余可记住点。

周边：使用 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，略睹其繁华似锦。

（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）

如何漂亮使用-Vue-之基础篇)如何漂亮使用 Vue 之基础篇

---

软件工程学，做为程序员，本就该是当学好的一门技艺。像[代码大全2]以及[程序整洁之道]，必定是须要好好读一读的。Web 前端开发，因其入门的容易性(还有需求的旺盛)，造就了这一行涌进了很多急功近利者，也惊现了不少使人“不堪卒读”的代码。而前端发展突飞猛进，如不能渐而掌握，长期来看，委屈的倒也不全是别人(读你代码者)，更是本身；举个浅显的例子来说，如不能学会很好的组织代码结构，即使有高手写了架构，一旦项目渐大，不也是照样面临被本身坑苦的凄楚？事实上，不乏不少开发者，未能养成很好的编码素养，基础如变量方法命名，也是能使人心惊肝颤；很显然这是损人不利己的行为，势必当善之。

对于团队来说，Eslint实在是须要配备的利器；既然难以保证每一个人都颇有素养，那么必须适当强制；至少避免了丛生些杂乱不堪的代码，以乱军心。固然，使用伊始，总会有些人不太适应，因此玩转编辑器的重要性，就再次体现出其价值了；由此也引出了自动化(半)工做流的话题了，这在以后的内容中会加以探讨。

前端基础技术，从事前端开发，长久之计来看，基本功是很是重要的；尤为是 JavaScript；这在写 Vue 时候，也体现的比较明显。其余如 Html，Css，天然不用说；除此以外，Scss 等预处理器，也是当学习并加以运用，以提高开发效率，节省开发成本；毕竟只有节省出充裕的时间来，才会去作更多优化，节约出更多精力与时间，一个优良的循环就此得以造成。

Vue 基础，这一点很重要，熟读[Vue.js 官方教程]，再没有比这更好的教程了；根据以前经验来看，心急是吃不到热豆腐的，欠下的也终究得还；至少起初需通读之，不然遇到问题，没法及时定位出在哪儿查究，这无疑会浪费更多时间。除此以外，Github 上找一份好的微型项目，认真读下，能够发掘出不少值得学习的玩法。

善用配置，《代码大全》第 18 章，讲到表驱动法（Table-Driven Methods），对于编程从业者，颇有必要一读。不少时候，可借助查询表来加以简化逻辑和继承树关系。这在团队协做，分模块开发模式具备更非凡价值；应该善用配置，将各个模块予以抽离，使得相互间不存强依赖，如此开发环节也大大的避免代码冲突。譬如，了解 JavaScript 特性，便可作以下写法：

const files = require.context('.', true, /\.svg$/) const modules = {} files.keys().forEach((key) => { if (key === './index.js') return modules[key.replace(/(\.\/|\.svg)/g, '')] = files(key) }) export default modules 

这样便可写出便捷的 [Icon Component]，使用时只需添加新 Svg 入 assets，而后引用 icon 时填写对应 Svg 名字便可，十分方便；推此及它，咱们可借助这样配置，去分解、组合各个模块，甚是方便。

---

Vue有三大特性，十分使人欣喜；一是其数据的双向绑定，即：经过数据绑定连接View和Model，让数据的变化自动映射为视图的更新。另外一个是其数据驱动的组件系统，即：用嵌套的组件树来描述用户界面(而一个组件偏偏能够对应MVVM中的ViewModel)，其三是基于构建工具的单文件组件格式，即其所提供了强大的loader API，来定义对不一样文件格式的预处理逻辑，从而让咱们能够将CSS、模板，甚至是自定义的文件格式等，当作JavaScript模块来使用，极大提高了代码的可复用性；Webpack 基于loader还能够实现大量高级功能，好比自动分块打包并按需加载、对图片资源引用的自动定位、根据图片大小决定是否用base64内联、开发时的模块热替换等等。固然 Vue 还具备其余若干使人击节赞叹的设计。

鉴于此，若是能够很熟练的掌握其数据的绑定与传输，组件的开发，以及周边 Webpack 等相关配置，则能将运用水平视为进入了一个新的层次。据以往经验来看，这不是一件容易的事儿，毕竟使用这 Vue 也是冲着解决需求去了，而非在搞研究。谁能说开车上路的司机，能了解关乎车的全部？相信，接下来的很长时间里，都须对这几方面加以学习、探索，而后加以利用。

如何漂亮使用-Vue-之实战组件篇)如何漂亮使用 Vue 之实战组件篇

---

Vue 一大特点是用嵌套的组件树来描述用户界面。因此组件的设计与编写相当重要；至少要保证她是易于修改和维护，可复用性和可读性高，耦合度低，接纳团队合做性开发… … 诸此等等。项目一旦庞杂，更得事先考虑好整个架构的设计，使其清晰合理；组件缓存的使用、避免太重组件的衍生 … 。而 Vue 组件系统又是有数据所驱动，更得兼顾数据在各类组件间通讯，避免数据被多方操做，Bug 难以定位等问题。

这是一个须长期积淀的技能，非朝夕可至。但，部份内容只需刻意关注，便可见其成效的。好比，简明且见名知义的命名，良好的编码规范，团队统一编码风格，以保证代码的可读性。运用设计模式原则，好比单一职责原则，将组件拆分抽离成更细粒度，保证组件功能单一，以提高组件复用行；再如接口隔离原则，采用稳定的服务端接口，将变化模块分离，使得组件得以解耦；在复杂的项目中，也是须要用到冗余、继承，这时候也须要关注下里氏替换原则、依赖倒置原则… 。另外还当学习 Vue 自己所提供的优化，像[路由懒加载], 即：结合 Vue 的 异步组件 和 Webpack 的 code splitting feature, 轻松实现路由组件的懒加载，使得该组件访问时才加载，以提高页面加载效率，还有利用服务端实现首屏渲染，组件缓存等等，尤须注意的是组件间数据通讯，这在以后一节中会说起，此处不作赘述。

这里须要学习探究的点不少，非片言可蔽之，看到一份 PPT Vue.js实践: 如何使用Vue2.0开发富交互式WEB应用；个种谈到 Vue 许多相关的点，值得一览。另外，如是为团队写公用组件，必定记得附上对应使用文档，这很重要。你看，如上所说，要写好一手漂亮 Vue(代码)，软件设计学问，是少不了的存在，不是么？（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）

如何漂亮使用-Vue-之实战通讯篇)如何漂亮使用 Vue 之实战通讯篇

---

早先有在[Vue 各种数据绑定]一文中，对 Vue 数据绑定有过些描述(version 1.)；虽然现在 Vue 早已升级至 2.，不过数据绑定变化虽多，但大局影响不大，譬如：再也不容许片断实例；须以v-html取代三 Mustache 语法；变动 v-for 遍历时参数顺序等等，具体可参见[从 Vue 1.x 迁移]。此处就数据在 vue 组件间传递作下探讨。

Vue2 移除 dispatch() 和 dispatch()和broadcast()以后，主要经过 prop 
(包括 v-model 自定义) 实现父组件向子组件传参，且只能单向传递；为了防止对父组件产生反向影响，Vue2 已移除了 .once 和 .sync 修饰符，子组件须要显式地传递一个事件而不是依赖于隐式地双向绑定。 一旦你试图在组件内，直接修改经过props传入的父组件数据，这将被认为是anti-pattern的，报如下错误：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value.

但，若是传递的 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-bus，以提供了一个全局事件中心，使得能够像使用内置事件流同样，便捷的使用全局事件。固然，Vue 也提供了 $refs，能够跨层调用，或者诸如这样this.$parent.$parent；提供了不表明推荐；尽可能少的去运用，除非逼不得已，或者去恶做剧坑人。固然，也可借助原生Api sessionStorage, localStorage 等等进行数据存储，以到达通讯目的；对于，兼顾得失，争取扁平统一化通讯方式就好。鉴于篇幅，就很少赘述。

如何漂亮使用-Vue-之Webpack篇)如何漂亮使用 Vue 之Webpack篇

---

前文提到，推荐使用Vue-cli，它已然帮助咱们贴心的配置好了 Webpack 相关。在编写 router 配置之时，能够轻松实现路由组件的懒加载，使得项目能够拆分红若干个 js 小包，和一个略大的 vendor，运行时按需去加载。即，咱们能够像以下用法，去配备路由组件（固然，咱们也能够把组件按组分块）：

import Frame from './../views/Frame' export default { path: '/', component: Frame, children: [{ path: '/nicelinks', meta: { title: setTitleLang('晚晴幽草轩', 'Nice Home Blog') }, component: resolve => require(['./../views/Nicelinks'], resolve) }] }

DllReferencePlugin 
除此以外，在webpack这块，仍是有很是多东西须要去优化，以缩短包构建的时间、改善其体积等等。好比可利DllReferencePlugin将经常使用不怎么变动的文件，抽离出来打入另外一统一的文件(vendor.dll.js)， 外链以 script 引入。这个网上教程不少，此不赘述。

webpack-bundle-analyzer 
最新 Vue-cli还帮着注入了 [webpack-bundle-analyzer]插件（Webpack插件和CLI实用程序），她能够将内容束展现为方便交互的直观树状图，让你明白你所构建包中真正引入的内容；咱们能够借助她，发现它大致有哪些模块组成，找到错误的模块，而后优化它。咱们能够在package.json中注入以下命令去方便运行她(npm run analyz)，默认会打开 http://127.0.0.1:8888做为展现。

“analyz”: “NODE_ENV=production npm_config_report=true npm run build”

webpack-bundle-analyzer在引入了 DllReferencePlugin插件后，想必会在 webpack.dll.conf.js中将 vue加入进去；例如进行了以下配置：

entry: { vendor: [ 'lodash', 'superagent', 'vue', 'vue-router', 'vue-i18n' 'vuex' ] } 

当你使用 webpack-bundle-analyzer去分析时，你会发现 Parse Size 为 71 KB 的 vue.common.js，会出如今 vendor.xxx.js 中，按预想它不是应该被打入 vendor.dll.js 中的？谈及这里，为了保证文章的完整性，不得不提下，vue2 通过 2.2 版本升级后, 文件变成了 8 个，分别是:

vue.common.js 
vue.esm.js 
vue.js 
vue.min.js 
vue.runtime.common.js 
vue.runtime.esm.js 
vue.runtime.js 
vue.runtime.min.js

这在Vue2 dist 目录下各个文件的区别, 能够浏览。另外，vue 文当独立构建-vs-运行时构建，也阐明了二者区别；这 vue.common.js 隶属独立构建产物，而默认 NPM 包导出的是 运行时 构建，为了使用独立构建（支持 template），在 webpack 配置中添加下面的别名：

resolve: { alias: { 'vue$': 'vue/dist/vue.common.js' } }

如此一来，在 webpack.dll.conf.js 配备中注入 vue，致使 vendor.xxx.js 中出现 vue.common.js，就可以获得解释了：dll 中对 vue 打包配置，与 resolve 中引入有出入，前者默认为运行时构建。如能保证是一致了，此问题便可解决。这一点，有通过测试，得出数据以下(resolve 配置如上)：

1. webpack.dll.conf.js 中注入 vue，build 以后获得 vendor.xx.js 611KB， vendor.dll.js 180 KB；
2. webpack.dll.conf.js 中注入 resolve 同名引入 vue/dist/vue.common.js，build 以后获得 vendor.xx.js 540KB vendor.dll.js 207 KB；

二者比较，vendor.xx.js 相差 +71 KB，正是 vue.common.js Parse Size；vendor.dll.js 相差 -27KB，即运行时构建所得大小。打开生成的vendor-manifest.json，也会发现，先后生成 vue 相关的引用分别是：

/node_modules/vue/dist/vue.common.js 
./node_modules/vue/dist/vue.runtime.common.js

如何漂亮使用 Vue 之工做流篇

---

“轻功不表明武功，但速度决定了你个人距离。”——白凤（秦时明月）。智能化、自动化趋势愈加明显，做为程序员如不能尽快适应，其所面临的窘境可想而知。不久的未来，蓝领代码民工，势必会在科技的浪潮中捉襟见肘；因此这更加要求从业者能快准稳的去解决需求，同时保持知识技能的不断更新。而这快字，天然是业务技能熟练度多半取决定性做用，但若是有优善的工做流机制，势必锦上添花。而这个话题，所涉及的点线面，非一言能够蔽之；这会在渐进的学习探索中不断去变化更新。但至少一个当前的准则是：即使不能全自动，至少也须半自动化。（web前端学习交流群：328058344 禁止闲聊，非喜勿进！）

不少朋友使用 hexo来构建博客；hexo 是基于 Node.js产物，用它发表博文，非常方便；你只需hexo clean,hexo g, hexo d三个命令便可；文章数据一多，一套打下来，也得 20s+；若是略懂 npm，在 package.js中加入点命名，例如像这样；

"scripts": { "start": "sudo hexo clean && sudo hexo g && sudo gulp && sudo hexo d" }

那么 只需运行 npm start就好，可将时间消耗缩短至 2s节省时间虽然说很少，却也是数量级的提高，并且代价只是那么小，并一劳永逸。因此有必要对此，以些许微薄经验略做阐述，抛砖以引大玉。

• Vue-cli虽然强大，但毕竟做为基础公用，不宜繁杂。应有本身(团队)的脚手架，当准备开启新的项目时候，只需运行脚手架，以初始化整个项目，而不是一点点拷贝，而后各类从新配置，引入路由，注入 Bootstrap … 。相同项目中也该有可一键生成的模版库，或者自动化的 Json 解析机制。

• 开始编写代码前，必须同后台er，预约好接口，参数以及返回数据；并令之生成方便检索，可供测试的可视化 API 文档。再没有比这更重要的（若是项目超过一月/人）。像这样开源工具，也多不胜数，好比 Swagger-Ui。

• 在编写代码时候，则该先三思然后写。而写时，当确保编辑工具的犀利化，好比检索语法错误，开合标签完整，自动格式美化代码，使之契合约定的 Eslint 要求，也保证代码清晰简洁；想象下若是你的书桌上成天被摆满了虫蝇墨液，你做何想？

• Vue-cli 已帮配好了代理，无需担忧本地调试跨域问题；但如何能快速提交有效代码，须要自行配备。命令行也好，SourceTree 可视化工具也罢，方便快捷就好。也该借助pre-commit工具，在 commit 前执行校验，防止出现非法提交，影响队友。

• 从业历程中有经历过手动打各类测试 APK 的凄惨，也经历了手动各类 build 发布的艰难，至今想起，尽是心酸。因此，监听仓库代码变化，自动化构建，此乃居家生活必备良品。从业中还经历过各类关闭 Bug 的奇葩方式，坦言作这事儿比解决所谓 Bug 花费的时间还多。而这些，无非是那时候团队见识短浅之诟病耳，现在团队使用 jenkins 和 GitLab，双剑合壁，再无那种痛楚，感动。

• 何谓之写出漂亮 Vue？不只在于代码之优美，还在于其高效，资源节省。以数据驱动的 Vue 自己非常效率；但使用 C 写出的代码不见得都比 JavaScript 要高效，这变数在因而不一样人去写。由此，除了 Code Review 代码外，也须有一套行之有效的全方位分析方法。以保证代码的按需加载，Css 的合理编写 & 引用，凡此等等。

• 何谓之写出漂亮 Vue？还在于其可靠、稳定，而这些最终是要反映在于产品之上；所以，好的产品不只须配备访问状况，行为分析，事件埋点，也得有错误上报。早先有用简书这款读写一体的产品，现在上面不只充斥各类鸡汤与戾气纵横的标题文，还充斥这各类 Bug，尤为是在 Web网页上(Mac mini，Pc)，反馈无门，简直惨不忍睹；何也？判定他们确定是没有使用 sentry 相似产品工具的。

• 一门后台技术；不懂后台的前端不是好设计师；这看似调侃的话，实则仍是挺有道理的。现在，大行其道的先后端分离开发模式，若是各司其职的双方，可以懂得彼此技术，则更容易配合，也更效率。而更多时候，况且出于某些须要，前端写后台，也是常见；对于我的而言也是好事，艺多不压身。最近有在写点我的产品，若是寻找后台开发协助，比本身学习如何写后端，其中麻烦确定不会少；并且也非长久之计。即使都没这些，要解决 Vue SEO 以及提高渲染速度，作 Vue SSR 相关，也是须要懂些后台技术。

• 设计相关；这个设计，不但包括代码结构、层次、接口等设计，对于前端从业者，必然也包括页面相关；好比，正在开发的我的产品: 倾城之链（英文名曰：NICE LINKS），由于设计美学上的欠缺，可谓寸步难行的初步塑造出大体应用，但，从视觉效果来看，总以为差那么些意思，仍在苦思中等待枯竭。即使没有相似需求，页面已然有设计师画出稿来，如要完美的还原，这设计相关的素养，也是不可或缺的存在；毕竟产品最终呈现给用户的形态，取决于我等前端开发者。

写在最后的结语

---

“你首先得是一位程序员，而后才是一位前端程序员”，这个观点颇有道理，而且将随着时间的更替，显得愈加明显。所以本篇所要探究的，不只仅限于对Vue的学习与运用，更深层次的意图在于，以当前流行框架Vue为突入口，分享时下书写前端的一些开发经验、编程心得、以及产品用户体验等。很显然，这里谈及的只是其中冰山一角。何况前端发展如此，欣欣向荣，也是很难面面俱到。咱们惟有秉承不断学习之心态，拥抱变化，面向将来，才能在这汹涌的浪潮中、不至于被落下更远。谈及这里，颇有必要分享下，最近一直在搜集更新的[与时俱进版前端资源教程]，其着重搜集时下与将来技术的优秀之文，以及工具、优化、测试、安全等精华之章，宗旨是为前端学习、 技能提高、 视野扩展、 资料查找等行个方便；有兴趣的朋友，能够关注了解下，或者更进一步，协助补充 & 修正，让其能服务更多的人。