前幾日聽到一句生猛與激勵(lì)并存剂桥，可怕與尷尬同在忠烛，最無奈也無解的話：“90后，你的中年危機(jī)已經(jīng)殺到”权逗。這令我很受觸動(dòng)美尸。顯然，這有些夸張了斟薇，但就目前這日復(fù)一日的庸碌下去师坎，眨眼的功夫，那情形就會(huì)在這骨感的現(xiàn)實(shí)面前奔垦，悄然的被顯現(xiàn)屹耐。所以，越發(fā)體驗(yàn)到，當(dāng)必要有計(jì)劃的去做惶岭，去寫寿弱，去玩，去嗨按灶，利用好這荷爾蒙分泌還算旺盛的時(shí)光症革，去厚積去博取，去發(fā)現(xiàn)去折騰鸯旁；讓自己的生命不在僅是工作與惆悵噪矛，還有時(shí)間分與“詩和遠(yuǎn)方”。不用分析铺罢，就知道這該如何去做艇挨，高效去完成工作，然后去學(xué)著優(yōu)雅地生而活韭赘。目前猶身為前端開發(fā)者缩滨，且在使用 Vue，那么就有了此文泉瞻；這不僅是紀(jì)錄或分享脉漏，也是在漫漫之路上下求索，更希望能探討和指點(diǎn)袖牙，以資見識(shí)侧巨，提升其效。

微注： 早先在寫[如何優(yōu)雅地使用Sublime Text]時(shí)候鞭达，前后歷經(jīng)10月司忱，至今雖不斷更新猶在，離該話題也是相去甚遠(yuǎn)碉怔。所以烘贴，談及此一個(gè)寬廣話題的存在，欲一談也須深入研究撮胧，非朝夕可至桨踪；所以本篇將采取不定期更新，當(dāng)然芹啥，這么做锻离，也是治療自身拖延癥之一法子；另外也是限制聚合網(wǎng)抓取的一種嘗試墓怀。
更新： 對于如何構(gòu)建 VueJs 項(xiàng)目汽纠，自然推薦官方的腳手架 vue-cli
；而對于微小型項(xiàng)目傀履，個(gè)人倒挺看好poi —— (Delightful web development)虱朵，它能讓你十分便捷的使用當(dāng)前流行的框架（Vue React等）。即便如此呢，很多業(yè)界朋友碴犬，對 Vue 項(xiàng)目的構(gòu)建絮宁，還是不盡如人意；鑒于此服协，有根據(jù)過往的些許經(jīng)驗(yàn)绍昂，設(shè)計(jì)出一套樣板 ——vue-boilerplate-template，以供參考偿荷，當(dāng)然也期待朋友給予指正窘游。其中已經(jīng)依賴了vue-router
、vuex跳纳、 vue-i18n忍饰、 element-ui、 bootstrap 諸多庫棒旗；也注入了 webpack喘批、 Eslint、 pre-commit等等便捷開發(fā)相關(guān)的庫铣揉。其中對與后臺(tái)接口調(diào)用與使用，vuex 的運(yùn)用餐曹，視圖結(jié)構(gòu)的塑造逛拱，路由和多語言的配置，公共方法的調(diào)度台猴，webpack打包優(yōu)化等等朽合，都基于便捷開發(fā)的前提下，做了相應(yīng)的設(shè)計(jì)饱狂，希望有緣人會(huì)喜歡曹步；這一番設(shè)計(jì)緣由，得空會(huì)另起一篇文章予以闡明休讳；而這番設(shè)計(jì)也會(huì)讲婚，在不斷的學(xué)習(xí)中持續(xù)改進(jìn)，敬請期待

隨言: 身在程序的江湖俊柔，如你是一位即將出征武士筹麸，對決于浩瀚無盡的需求大軍；那么你不僅需要一副好的體格雏婶，還需要一身技藝：而這軟件工程學(xué)
(抑或加算法)就好比內(nèi)功（查克拉）物赶；而所使用的各家語言
，則好如武學(xué)招式（獨(dú)孤九劍留晚？）酵紫；那加以利用的各種工具，當(dāng)如隨身利器（小李飛刀？）奖地；那屬于自己一套極致開發(fā)流程橄唬，便是輕功（電光神行步？）……如是斯言鹉动，那么作為開發(fā)者的你轧坎，幾技傍身耶？
如上隨言泽示，此篇準(zhǔn)備從以下幾個(gè)方面來探討：

如何漂亮使用 Vue 之工具篇

欲先利其器缸血，必先利其器，這是此博客一大倡導(dǎo)械筛；關(guān)于如何優(yōu)雅地去寫好 Vue捎泻，工具自是首當(dāng)其沖要提及的，畢竟這非常重要埋哟；在你選擇使用 Vue 來從事前端開發(fā)的那一刻笆豁，你已經(jīng)同意的這一論點(diǎn)：畢竟 Vue 也是用原生 Js 寫的闯狱，Js 則是用 C 語言寫哄孤，而 C 又是匯編寫的….. 這不再是刀耕火種的年代，而你也未用匯編或 C 來解決你的需求晨逝，So阀趴，你是同意的。既是贊同的统求，豈有不用好它的道理？那么來一起探討下：

外設(shè)：除了那些舒適坐騎與書桌外，雙屏顯示器奏甫，Mac則是必備外設(shè)裝備挠进；你知道案怯，一屏編輯器中寫著代碼的同時(shí)浮驳，就能在另一屏 Chrome 下看到表現(xiàn)奉件，這很高效便捷，也令人很是舒服接谨。而 Mac 這設(shè)備中堪稱優(yōu)雅情人的存在扫夜，更是居家良品望侈。倘若，所處的工作環(huán)境沒那么看重效率，或者未表現(xiàn)出該有的慷慨屎债，則一定須善待自己的精力和時(shí)間仅政，勇于將自己的開發(fā)環(huán)境打造精良。

軟件：身為開發(fā)人員廉丽，你電腦以及其中配備的軟件棕诵，就好如武士手中的利劍，是助你大殺四方的存在牧抵；所以無論是用它來玩一玩惡作劇妹孙，還是來致敬把Dota，抑或是搞搞需求获枝，皆十分有必要將其鋒利化蠢正。因此，諸如 Alfred省店，Brew嚣崭，Iterm2，Oh-my-zh懦傍，Git等必備就不說了雹舀；對于前端開發(fā)，編輯器與瀏覽器的配備與運(yùn)用粗俱，尤其重要（對于這一點(diǎn)很多前端開發(fā)者说榆，尚未達(dá)到及格，一如其水平）寸认；對于瀏覽器签财，只推薦Chrome，不只是瀏覽或者調(diào)試偏塞，更在于其搜索荠卷。而編輯器則推薦 SublimeText3與 Atom；VsCode也很棒的存在烛愧，寫前端后臺(tái)都十分趁手(目測 Google 也都力推之)；不太推薦使用 WebStorm掂碱，因?yàn)槠涑朔慈祟惖牟僮髟O(shè)計(jì)外怜姿，感受不到其他可記住點(diǎn)。

周邊：使用 Vue 開發(fā)開發(fā)前端疼燥，當(dāng)須保持對周邊工具體系沧卢，經(jīng)常保持關(guān)注，比如Node醉者，Npm(Yarn)但狭，Webpack披诗，Gulp等，以及Lodash立磁，superagent呈队，d3等工具庫，再有就是 Vue 系本身具庫唱歧，譬如Vue-cli, vue-router等輔助宪摧；再有就是不斷衍生出來的 Vue 插件擴(kuò)展。Atwood定律中闡述到：Any application that can be written in JavaScript, will eventually be written in JavaScript.(翻譯過來即是：凡是能用JavaScript寫出來的颅崩，最終都會(huì)用JavaScript寫出來)几于。這個(gè)理論同樣適用于 Vue，它簡易強(qiáng)大的存在沿后，吸引了很多超厲害的開發(fā)者或團(tuán)隊(duì)沿彭，為其貢獻(xiàn)了無數(shù)好用的組件庫。比如: 餓了么出品的Element-UI尖滚，還有 vue-echarts喉刘，vue-multiselect …… 具體可以參看awesome-vue，略睹其繁華似錦熔掺。

如何漂亮使用-Vue-之基礎(chǔ)篇)如何漂亮使用 Vue 之基礎(chǔ)篇

軟件工程學(xué)置逻，作為程序員推沸，本就該是當(dāng)學(xué)好的一門技藝。像[代碼大全2]以及[程序整潔之道]券坞，一定是需要好好讀一讀的鬓催。Web 前端開發(fā)，因其入門的容易性(還有需求的旺盛)恨锚，造就了這一行涌進(jìn)了不少急功近利者宇驾，也驚現(xiàn)了很多令人“不堪卒讀”的代碼。而前端發(fā)展日新月異猴伶，如不能漸而掌握课舍，長期來看，委屈的倒也不全是別人(讀你代碼者)他挎，更是自己筝尾；舉個(gè)淺顯的例子來講，如不能學(xué)會(huì)很好的組織代碼結(jié)構(gòu)办桨，即便有高手寫了架構(gòu)筹淫，一旦項(xiàng)目漸大，不也是照樣面臨被自己坑苦的凄楚呢撞？事實(shí)上损姜，不乏很多開發(fā)者饰剥，未能養(yǎng)成很好的編碼素養(yǎng)，基礎(chǔ)如變量方法命名摧阅，也是能令人心驚肝顫汰蓉；很顯然這是損人不利己的行為，勢必當(dāng)善之逸尖。

對于團(tuán)隊(duì)來講古沥，Eslint實(shí)在是需要配備的利器；既然難以保證每個(gè)人都很有素養(yǎng)娇跟，那么必須適當(dāng)強(qiáng)制岩齿；至少避免了叢生些雜亂不堪的代碼，以亂軍心苞俘。當(dāng)然盹沈，使用伊始，總會(huì)有些人不太適應(yīng)，所以玩轉(zhuǎn)編輯器的重要性，就再次體現(xiàn)出其價(jià)值了鳖孤；由此也引出了自動(dòng)化(半)工作流的話題了，這在之后的內(nèi)容中會(huì)加以探討肃晚。

前端基礎(chǔ)技術(shù)，從事前端開發(fā)仔戈，長久之計(jì)來看关串，基本功是非常重要的；尤其是 JavaScript监徘；這在寫 Vue 時(shí)候晋修，也體現(xiàn)的比較明顯。其他如 Html凰盔，Css墓卦，自然不用說；除此之外户敬，Scss 等預(yù)處理器落剪，也是當(dāng)學(xué)習(xí)并加以運(yùn)用，以提升開發(fā)效率尿庐，節(jié)省開發(fā)成本著榴；畢竟只有節(jié)省出充裕的時(shí)間來，才會(huì)去做更多優(yōu)化屁倔，節(jié)約出更多精力與時(shí)間，一個(gè)優(yōu)良的循環(huán)就此得以形成暮胧。

Vue 基礎(chǔ)锐借，這一點(diǎn)很重要问麸，熟讀[Vue.js 官方教程]，再?zèng)]有比這更好的教程了钞翔；根據(jù)之前經(jīng)驗(yàn)來看严卖，心急是吃不到熱豆腐的，欠下的也終究得還布轿；至少起初需通讀之哮笆，否則遇到問題，無法及時(shí)定位出在哪兒查究汰扭，這無疑會(huì)浪費(fèi)更多時(shí)間稠肘。除此之外，Github 上找一份好的微型項(xiàng)目萝毛，認(rèn)真讀下项阴，可以發(fā)掘出很多值得學(xué)習(xí)的玩法。

善用配置笆包，《代碼大全》第 18 章环揽，講到表驅(qū)動(dòng)法（Table-Driven Methods），對于編程從業(yè)者庵佣，很有必要一讀歉胶。很多時(shí)候，可借助查詢表來加以簡化邏輯和繼承樹關(guān)系巴粪。這在團(tuán)隊(duì)協(xié)作通今，分模塊開發(fā)模式具有更非凡價(jià)值；應(yīng)該善用配置验毡，將各個(gè)模塊予以抽離衡创，使得相互間不存強(qiáng)依賴，如此開發(fā)環(huán)節(jié)也大大的避免代碼沖突晶通。譬如璃氢，了解 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]狮辽，使用時(shí)只需添加新 Svg 入 assets一也，然后引用 icon 時(shí)填寫對應(yīng) Svg 名字即可，十分方便喉脖；推此及它椰苟，我們可借助這樣配置，去分解树叽、組合各個(gè)模塊舆蝴，甚是方便。

Vue有三大特性，十分令人欣喜洁仗；一是其數(shù)據(jù)的雙向綁定层皱，即：通過數(shù)據(jù)綁定鏈接View和Model，讓數(shù)據(jù)的變化自動(dòng)映射為視圖的更新赠潦。另一個(gè)是其數(shù)據(jù)驅(qū)動(dòng)的組件系統(tǒng)叫胖，即：用嵌套的組件樹來描述用戶界面(而一個(gè)組件恰恰可以對應(yīng)MVVM中的ViewModel)，其三是基于構(gòu)建工具的單文件組件格式她奥，即其所提供了強(qiáng)大的loader API瓮增，來定義對不同文件格式的預(yù)處理邏輯，從而讓我們可以將CSS哩俭、模板绷跑，甚至是自定義的文件格式等，當(dāng)做JavaScript模塊來使用携茂，極大提升了代碼的可復(fù)用性你踩；Webpack 基于loader還可以實(shí)現(xiàn)大量高級功能，比如自動(dòng)分塊打包并按需加載讳苦、對圖片資源引用的自動(dòng)定位带膜、根據(jù)圖片大小決定是否用base64內(nèi)聯(lián)、開發(fā)時(shí)的模塊熱替換等等鸳谜。當(dāng)然 Vue 還具有其他若干令人擊節(jié)贊嘆的設(shè)計(jì)膝藕。

鑒于此，如果可以很熟練的掌握其數(shù)據(jù)的綁定與傳輸咐扭，組件的開發(fā)芭挽，以及周邊 Webpack 等相關(guān)配置，則能將運(yùn)用水平視為進(jìn)入了一個(gè)新的層次蝗肪。據(jù)以往經(jīng)驗(yàn)來看袜爪，這不是一件容易的事兒，畢竟使用這 Vue 也是沖著解決需求去了薛闪，而非在搞研究辛馆。誰能說開車上路的司機(jī)，能了解關(guān)乎車的所有豁延？相信昙篙，接下來的很長時(shí)間里，都須對這幾方面加以學(xué)習(xí)诱咏、探索苔可，然后加以利用。

如何漂亮使用-Vue-之實(shí)戰(zhàn)組件篇)如何漂亮使用 Vue 之實(shí)戰(zhàn)組件篇

Vue 一大特色是用嵌套的組件樹來描述用戶界面袋狞。所以組件的設(shè)計(jì)與編寫至關(guān)重要焚辅；至少要保證她是易于修改和維護(hù)映屋，可復(fù)用性和可讀性高，耦合度低同蜻，接納團(tuán)隊(duì)合作性開發(fā)… … 諸此等等秧荆。項(xiàng)目一旦龐雜，更得事先考慮好整個(gè)架構(gòu)的設(shè)計(jì)埃仪，使其清晰合理；組件緩存的使用陕赃、避免過重組件的衍生 … 卵蛉。而 Vue 組件系統(tǒng)又是有數(shù)據(jù)所驅(qū)動(dòng)，更得兼顧數(shù)據(jù)在各種組件間通信么库，避免數(shù)據(jù)被多方操作傻丝，Bug 難以定位等問題。

這是一個(gè)須長期積淀的技能诉儒，非朝夕可至葡缰。但，部分內(nèi)容只需刻意關(guān)注忱反，即可見其成效的泛释。比如，簡明且見名知義的命名温算，良好的編碼規(guī)范怜校，團(tuán)隊(duì)統(tǒng)一編碼風(fēng)格，以保證代碼的可讀性注竿。運(yùn)用設(shè)計(jì)模式原則茄茁，比如單一職責(zé)原則，將組件拆分抽離成更細(xì)粒度巩割，保證組件功能單一裙顽，以提升組件復(fù)用行；再如接口隔離原則宣谈，采用穩(wěn)定的服務(wù)端接口愈犹，將變化模塊分離，使得組件得以解耦蒲祈；在復(fù)雜的項(xiàng)目中甘萧，也是需要用到冗余、繼承梆掸，這時(shí)候也需要關(guān)注下里氏替換原則扬卷、依賴倒置原則… 。另外還當(dāng)學(xué)習(xí) Vue 本身所提供的優(yōu)化酸钦，像[路由懶加載], 即：結(jié)合 Vue 的 異步組件 和 Webpack 的 code splitting feature, 輕松實(shí)現(xiàn)路由組件的懶加載怪得，使得該組件訪問時(shí)才加載，以提升頁面加載效率，還有利用服務(wù)端實(shí)現(xiàn)首屏渲染徒恋，組件緩存等等蚕断，尤須注意的是組件間數(shù)據(jù)通信，這在之后一節(jié)中會(huì)提及入挣，此處不做贅述亿乳。

這里需要學(xué)習(xí)探究的點(diǎn)很多，非片言可蔽之径筏，看到一份 PPT Vue.js實(shí)踐: 如何使用Vue2.0開發(fā)富交互式WEB應(yīng)用葛假；個(gè)種談到 Vue 許多相關(guān)的點(diǎn)，值得一覽滋恬。另外聊训，如是為團(tuán)隊(duì)寫公用組件，一定記得附上對應(yīng)使用文檔恢氯，這很重要带斑。你看，如上所說勋拟，要寫好一手漂亮 Vue(代碼)勋磕，軟件設(shè)計(jì)學(xué)問，是少不了的存在指黎，不是么朋凉？（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)４装病）

如何漂亮使用-Vue-之實(shí)戰(zhàn)通信篇)如何漂亮使用 Vue 之實(shí)戰(zhàn)通信篇

早先有在[Vue 各類數(shù)據(jù)綁定]一文中杂彭，對 Vue 數(shù)據(jù)綁定有過些描述(version 1.)；雖然如今 Vue 早已升級至 2.吓揪，不過數(shù)據(jù)綁定變化雖多亲怠，但大局影響不大，譬如：不再允許片段實(shí)例柠辞；須以v-html取代三 Mustache 語法团秽；變更 v-for 遍歷時(shí)參數(shù)順序等等，具體可參見[從 Vue 1.x 遷移]叭首。此處就數(shù)據(jù)在 vue 組件間傳遞做下探討习勤。

Vue2 移除 $dispatch() 和 $broadcast()之后，主要通過 prop
(包括 v-model 自定義) 實(shí)現(xiàn)父組件向子組件傳參焙格，且只能單向傳遞图毕；為了防止對父組件產(chǎn)生反向影響，Vue2 已移除了 .once 和 .sync 修飾符眷唉，子組件需要顯式地傳遞一個(gè)事件而不是依賴于隱式地雙向綁定予颤。 一旦你試圖在組件內(nèi)囤官，直接修改通過props傳入的父組件數(shù)據(jù)，這將被認(rèn)為是anti-pattern的蛤虐，報(bào)以下錯(cuò)誤：

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 本身是引用型傳遞，像對象或者數(shù)組驳庭，由于數(shù)據(jù)類型自身特性刑顺，無論是什么綁定方式都會(huì)是雙向綁定！這些在Vue文檔－單向數(shù)據(jù)流中有作說明饲常；請看這個(gè)例子：

這里需要留意的是：Vue 要么監(jiān)聽的是基本數(shù)據(jù)類型的值變化捏检，要么監(jiān)聽的是引用數(shù)據(jù)類型的引用變化；因此不皆，vue對于數(shù)組，才自己封裝了一套方法（包括$set , $remove）熊楼，如果直接變更引用類型的內(nèi)容霹娄，即便數(shù)據(jù)已經(jīng)修改，但 Vue 是感知不到的鲫骗，所以視圖將不會(huì)更新（針對性的對屬性進(jìn)行賦值操作犬耻，則會(huì)調(diào)用其屬性的 set 方法，因此Vue會(huì)得到感知执泰，從而驅(qū)動(dòng)視圖更新）枕磁。這里需要補(bǔ)充的是：Vue 使用 Object.defineProperty（ES5特性）將數(shù)據(jù)轉(zhuǎn)為 getter/setter，從而實(shí)現(xiàn)對數(shù)據(jù)的 watcher术吝，setter被調(diào)用時(shí)重新繪制關(guān)聯(lián)的 Dom计济，從而刷新視圖。

所以排苍，對父組件傳遞來引用型數(shù)據(jù)沦寂，如需更改，最好改動(dòng)做深度拷貝后的數(shù)據(jù)淘衙，而且需要注意得失传藏，Object.assign不是深度拷貝，即便采用了 Object.freeze()去凍結(jié)彤守。對于子組件向父組件回傳參數(shù)毯侦，可借助 $emit，當(dāng)然也可以使用 callback Functon具垫，可參見jsfiddle 示例侈离。非父子組件間通信，Vue 有提供 Vuex做修，以狀態(tài)共享方式來實(shí)現(xiàn)同信霍狰，對于這一點(diǎn)抡草，應(yīng)該注意考慮平衡，從整體設(shè)計(jì)角度去考量蔗坯，確保引入她的必要康震。如果項(xiàng)目不怎么復(fù)雜的話，完全可以自己設(shè)計(jì)一套 vue-bus宾濒，以提供了一個(gè)全局事件中心腿短，使得可以像使用內(nèi)置事件流一樣，便捷的使用全局事件绘梦。當(dāng)然橘忱，Vue 也提供了 $refs，可以跨層調(diào)用卸奉，或者諸如這樣this.$parent.$parent钝诚；提供了不代表推薦；盡量少的去運(yùn)用榄棵，除非逼不得已凝颇，或者去惡作劇坑人。當(dāng)然疹鳄，也可借助原生Api sessionStorage, localStorage 等等進(jìn)行數(shù)據(jù)存儲(chǔ)拧略，以到達(dá)通信目的；對于瘪弓，兼顧得失垫蛆，爭取扁平統(tǒng)一化通信方式就好。鑒于篇幅腺怯，就不多贅述袱饭。

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

前文提到，推薦使用Vue-cli呛占，它已然幫助我們貼心的配置好了 Webpack 相關(guān)宁赤。在編寫 router 配置之時(shí)，可以輕松實(shí)現(xiàn)路由組件的懶加載栓票，使得項(xiàng)目可以拆分成若干個(gè) js 小包决左，和一個(gè)略大的 vendor，運(yùn)行時(shí)按需去加載走贪。即佛猛，我們可以像如下用法，去配備路由組件（當(dāng)然坠狡，我們也可以把組件按組分塊）：

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這塊，還是有非常多東西需要去優(yōu)化逃沿，以縮短包構(gòu)建的時(shí)間婴渡、改善其體積等等幻锁。比如可利DllReferencePlugin將常用不怎么變更的文件，抽離出來打入另一統(tǒng)一的文件(vendor.dll.js)边臼， 外鏈以 script 引入哄尔。這個(gè)網(wǎng)上教程很多，此不贅述柠并。

webpack-bundle-analyzer
最新Vue-cli還幫著注入了 [webpack-bundle-analyzer]插件（Webpack插件和CLI實(shí)用程序）岭接，她可以將內(nèi)容束展示為方便交互的直觀樹狀圖，讓你明白你所構(gòu)建包中真正引入的內(nèi)容臼予；我們可以借助她鸣戴，發(fā)現(xiàn)它大體有哪些模塊組成，找到錯(cuò)誤的模塊粘拾，然后優(yōu)化它窄锅。我們可以在package.json中注入如下命令去方便運(yùn)行她(npm run analyz)，默認(rèn)會(huì)打開 http://127.0.0.1:8888作為展示缰雇。

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

webpack-bundle-analyzer在引入了 DllReferencePlugin插件后酬滤，想必會(huì)在 webpack.dll.conf.js中將 vue加入進(jìn)去；例如進(jìn)行了如下配置：

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

當(dāng)你使用 webpack-bundle-analyzer去分析時(shí)寓涨，你會(huì)發(fā)現(xiàn) Parse Size 為 71 KB 的 vue.common.js，會(huì)出現(xiàn)在 vendor.xxx.js 中氯檐，按預(yù)想它不是應(yīng)該被打入 vendor.dll.js 中的戒良？談及這里，為了保證文章的完整性冠摄，不得不提下糯崎，vue2 經(jīng)過 2.2 版本升級后, 文件變成了 8 個(gè)，分別是:

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 目錄下各個(gè)文件的區(qū)別, 可以瀏覽河泳。另外沃呢，vue 文當(dāng)獨(dú)立構(gòu)建-vs-運(yùn)行時(shí)構(gòu)建，也闡明了兩者區(qū)別拆挥；這 vue.common.js 隸屬獨(dú)立構(gòu)建產(chǎn)物薄霜，而默認(rèn) NPM 包導(dǎo)出的是 運(yùn)行時(shí) 構(gòu)建，為了使用獨(dú)立構(gòu)建（支持 template）纸兔，在 webpack 配置中添加下面的別名：

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

如此一來惰瓜，在 webpack.dll.conf.js 配備中注入 vue，導(dǎo)致 vendor.xxx.js 中出現(xiàn) vue.common.js汉矿，就能夠得到解釋了：dll 中對 vue 打包配置崎坊，與 resolve 中引入有出入，前者默認(rèn)為運(yùn)行時(shí)構(gòu)建洲拇。如能保證是一致了奈揍，此問題即可解決曲尸。這一點(diǎn)，有經(jīng)過測試男翰，得出數(shù)據(jù)如下(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肺稀，即運(yùn)行時(shí)構(gòu)建所得大小第股。打開生成的vendor-manifest.json，也會(huì)發(fā)現(xiàn)话原，前后生成 vue 相關(guān)的引用分別是：

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

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

“輕功不代表武功夕吻，但速度決定了你我的距離》比剩”——白鳳（秦時(shí)明月）涉馅。智能化、自動(dòng)化趨勢越發(fā)明顯黄虱，作為程序員如不能盡快適應(yīng)稚矿，其所面臨的窘境可想而知。不久的將來捻浦，藍(lán)領(lǐng)代碼民工晤揣，勢必會(huì)在科技的浪潮中捉襟見肘；所以這更加要求從業(yè)者能快準(zhǔn)穩(wěn)的去解決需求朱灿，同時(shí)保持知識(shí)技能的不斷更新昧识。而這快字，自然是業(yè)務(wù)技能熟練度多半取決定性作用盗扒，但如果有優(yōu)善的工作流機(jī)制跪楞，勢必錦上添花。而這個(gè)話題侣灶，所涉及的點(diǎn)線面习霹，非一言可以蔽之；這會(huì)在漸進(jìn)的學(xué)習(xí)探索中不斷去變化更新炫隶。但至少一個(gè)當(dāng)前的準(zhǔn)則是：即便不能全自動(dòng)淋叶，至少也須半自動(dòng)化。（web前端學(xué)習(xí)交流群：328058344 禁止閑聊伪阶，非喜勿進(jìn)Ｉ烽荨）

很多朋友使用 hexo來構(gòu)建博客处嫌；hexo 是基于 Node.js產(chǎn)物，用它發(fā)表博文斟湃，很是方便熏迹；你只需hexo clean,hexo g, hexo d三個(gè)命令即可；文章數(shù)據(jù)一多凝赛，一套打下來注暗，也得 20s+；如果略懂 npm墓猎，在 package.js 中加入點(diǎn)命名捆昏，例如像這樣；

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

那么 只需運(yùn)行npm start就好毙沾，可將時(shí)間消耗縮短至 2s節(jié)省時(shí)間雖說不多骗卜，卻也是數(shù)量級的提升，而且代價(jià)只是那么小左胞，并一勞永逸寇仓。所以有必要對此，以些許微薄經(jīng)驗(yàn)略作闡述烤宙，拋磚以引大玉遍烦。

• Vue-cli雖然強(qiáng)大，但畢竟作為基礎(chǔ)公用躺枕，不宜繁雜服猪。應(yīng)有自己(團(tuán)隊(duì))的腳手架，當(dāng)準(zhǔn)備開啟新的項(xiàng)目時(shí)候屯远，只需運(yùn)行腳手架，以初始化整個(gè)項(xiàng)目捕虽，而不是一點(diǎn)點(diǎn)拷貝慨丐，然后各種重新配置，引入路由泄私，注入 Bootstrap … 房揭。相同項(xiàng)目中也該有可一鍵生成的模版庫，或者自動(dòng)化的 Json 解析機(jī)制晌端。

• 開始編寫代碼前捅暴，必須同后臺(tái)er，預(yù)定好接口咧纠，參數(shù)以及返回?cái)?shù)據(jù)蓬痒；并令之生成方便檢索，可供測試的可視化 API 文檔漆羔。再?zèng)]有比這更重要的（如果項(xiàng)目超過一月/人）梧奢。像這樣開源工具狱掂，也多不勝數(shù)，比如 Swagger-Ui亲轨。

• 在編寫代碼時(shí)候趋惨，則該先三思而后寫。而寫時(shí)惦蚊，當(dāng)確保編輯工具的犀利化器虾，比如檢索語法錯(cuò)誤，開合標(biāo)簽完整蹦锋，自動(dòng)格式美化代碼兆沙，使之契合約定的 Eslint 要求，也保證代碼清晰簡潔晕粪；想象下如果你的書桌上整天被擺滿了蟲蠅墨液挤悉，你作何想？

• Vue-cli 已幫配好了代理巫湘，無需擔(dān)心本地調(diào)試跨域問題装悲；但如何能快速提交有效代碼，需要自行配備尚氛。命令行也好诀诊，SourceTree 可視化工具也罷，方便快捷就好阅嘶。也該借助pre-commit工具属瓣，在 commit 前執(zhí)行校驗(yàn)，防止出現(xiàn)非法提交讯柔，影響隊(duì)友抡蛙。

• 從業(yè)歷程中有經(jīng)歷過手動(dòng)打各種測試 APK 的凄慘，也經(jīng)歷了手動(dòng)各種 build 發(fā)布的艱難魂迄，至今想起粗截，滿是心酸。所以捣炬，監(jiān)聽倉庫代碼變化熊昌，自動(dòng)化構(gòu)建，此乃居家生活必備良品湿酸。從業(yè)中還經(jīng)歷過各種關(guān)閉 Bug 的奇葩方式婿屹，坦言做這事兒比解決所謂 Bug 花費(fèi)的時(shí)間還多。而這些推溃，無非是那時(shí)候團(tuán)隊(duì)見識(shí)短淺之詬病耳昂利，如今團(tuán)隊(duì)使用 jenkins 和 GitLab，雙劍合壁，再無那種痛楚页眯，感動(dòng)梯捕。

• 何謂之寫出漂亮 Vue？不僅在于代碼之優(yōu)美窝撵，還在于其高效傀顾，資源節(jié)省。以數(shù)據(jù)驅(qū)動(dòng)的 Vue 本身很是效率碌奉；但使用 C 寫出的代碼不見得都比 JavaScript 要高效短曾，這變數(shù)在于是不同人去寫。由此赐劣，除了 Code Review 代碼外嫉拐，也須有一套行之有效的全方位分析方法。以保證代碼的按需加載魁兼，Css 的合理編寫 & 引用婉徘，凡此等等。

• 何謂之寫出漂亮 Vue咐汞？還在于其可靠盖呼、穩(wěn)定，而這些最終是要反映在于產(chǎn)品之上化撕；因此几晤，好的產(chǎn)品不僅須配備訪問情況，行為分析植阴，事件埋點(diǎn)蟹瘾，也得有錯(cuò)誤上報(bào)。早先有用簡書這款讀寫一體的產(chǎn)品掠手，如今上面不僅充斥各種雞湯與戾氣縱橫的標(biāo)題文憾朴，還充斥這各種 Bug，尤其是在 Web網(wǎng)頁上(Mac mini喷鸽，Pc)众雷，反饋無門，簡直慘不忍睹魁衙；何也报腔？斷定他們肯定是沒有使用 sentry 類似產(chǎn)品工具的株搔。

• 一門后臺(tái)技術(shù)剖淀；不懂后臺(tái)的前端不是好設(shè)計(jì)師；這看似調(diào)侃的話纤房，實(shí)則還是挺有道理的纵隔。如今，大行其道的前后端分離開發(fā)模式，如果各司其職的雙方捌刮，能夠懂得彼此技術(shù)碰煌，則更容易配合，也更效率绅作。而更多時(shí)候芦圾，何況出于某些需要，前端寫后臺(tái)俄认，也是常見个少；對于個(gè)人而言也是好事，藝多不壓身眯杏。最近有在寫點(diǎn)個(gè)人產(chǎn)品夜焦，如果尋找后臺(tái)開發(fā)協(xié)助，比自己學(xué)習(xí)如何寫后端岂贩，其中麻煩肯定不會(huì)少茫经；而且也非長久之計(jì)。即便都沒這些萎津，要解決 Vue SEO 以及提升渲染速度卸伞，做 Vue SSR 相關(guān)，也是需要懂些后臺(tái)技術(shù)姜性。

• 設(shè)計(jì)相關(guān)瞪慧；這個(gè)設(shè)計(jì)，不但包括代碼結(jié)構(gòu)部念、層次弃酌、接口等設(shè)計(jì)，對于前端從業(yè)者儡炼，必然也包括頁面相關(guān)妓湘；比如，正在開發(fā)的個(gè)人產(chǎn)品: 傾城之鏈（英文名曰：NICE LINKS）乌询，因?yàn)樵O(shè)計(jì)美學(xué)上的欠缺榜贴，可謂步履維艱的初步塑造出大致應(yīng)用，但妹田，從視覺效果來看唬党，總覺得差那么些意思，仍在苦思中等待枯竭鬼佣。即便沒有類似需求驶拱，頁面已然有設(shè)計(jì)師畫出稿來，如要完美的還原晶衷，這設(shè)計(jì)相關(guān)的素養(yǎng)蓝纲，也是不可或缺的存在阴孟；畢竟產(chǎn)品最終呈現(xiàn)給用戶的形態(tài)，取決于我等前端開發(fā)者税迷。

寫在最后的結(jié)語

“你首先得是一位程序員永丝，然后才是一位前端程序員”，這個(gè)觀點(diǎn)很有道理箭养，并且將隨著時(shí)間的更替慕嚷，顯得越發(fā)明顯。因此本篇所要探究的毕泌，不僅僅限于對Vue的學(xué)習(xí)與運(yùn)用闯冷，更深層次的意圖在于，以當(dāng)前流行框架Vue為突入口懈词，分享時(shí)下書寫前端的一些開發(fā)經(jīng)驗(yàn)蛇耀、編程心得、以及產(chǎn)品用戶體驗(yàn)等坎弯。很顯然纺涤，這里談及的只是其中冰山一角。況且前端發(fā)展如此抠忘，欣欣向榮撩炊，也是很難面面俱到。我們唯有秉承不斷學(xué)習(xí)之心態(tài)崎脉，擁抱變化拧咳，面向未來，才能在這洶涌的浪潮中囚灼、不至于被落下更遠(yuǎn)骆膝。談及這里，很有必要分享下灶体，最近一直在搜集更新的[與時(shí)俱進(jìn)版前端資源教程]阅签，其著重搜集時(shí)下與未來技術(shù)的優(yōu)秀之文，以及工具蝎抽、優(yōu)化政钟、測試、安全等精華之章樟结，宗旨是為前端學(xué)習(xí)养交、 技能提升、 視野擴(kuò)展瓢宦、 資料查找等行個(gè)方便碎连；有興趣的朋友，可以關(guān)注了解下刁笙，或者更進(jìn)一步破花，協(xié)助補(bǔ)充 & 修正，讓其能服務(wù)更多的人疲吸。