前端開發：如何寫一手漂亮的 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() 和 $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爲突入口，分享時下書寫前端的一些開發經驗、編程心得、以及產品用戶體驗等。很顯然，這裏談及的只是其中冰山一角。何況前端發展如此，欣欣向榮，也是很難面面俱到。咱們惟有秉承不斷學習之心態，擁抱變化，面向將來，才能在這洶涌的浪潮中、不至於被落下更遠。談及這裏，頗有必要分享下，最近一直在蒐集更新的[與時俱進版前端資源教程]，其着重蒐集時下與將來技術的優秀之文，以及工具、優化、測試、安全等精華之章，宗旨是爲前端學習、 技能提高、 視野擴展、 資料查找等行個方便；有興趣的朋友，能夠關注瞭解下，或者更進一步，協助補充 & 修正，讓其能服務更多的人。

做者：晚風愛前端連接：http://www.jianshu.com/p/a496343dd12a來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。