vue全面介紹--全家桶、項目實例

簡介

「簡單卻不失優雅，小巧而不乏大匠」。
2016年最火的前端框架當屬Vue.js了，不少使用過vue的程序員這樣評價它，「vue.js兼具angular.js和react.js的優勢，並剔除了它們的缺點」。授予了這麼高的評價的vue.js，也是開源世界華人的驕傲，由於它的做者是位中國人–尤雨溪（Evan You）。
Vue.js 是一個JavaScriptMVVM庫，是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的，採用自底向上增量開發的設計。相比於Angular.js，Vue.js提供了更加簡潔、更易於理解的API，使得咱們可以快速地上手並使用Vue.js；同時比起 React + Redux 相對複雜的架構，Vue.js 更加輕量級也更加容易上手，是初創項目的首選前端框架。Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。而且做者是華人的關係，Vue擁有着對華人開發者最友好的api文檔和官方教程。
調試插件

在vue調試方面，能夠選擇安裝chrome插件vue Devtools。打開vue項目，在console控制檯選擇vue面板。在Devtools工具中，能夠選擇組件，查看對應組件內的數據信息。也能夠選擇Vuex選項，查看該項目內Vuex的狀態變量信息。

UI組件庫

在vue組件庫方面，我的不推薦使用UI組件庫，畢竟本身造輪子的過程仍是頗有成就感的。固然，若是更重視開發效率，而且選擇了vue2.0做爲前端框架，那麼餓了麼推出的Element組件就是一個很不錯的選擇。其github項目（https://github.com/ElemeFE/element）更新比較頻繁，雖然項目會有些不穩定，可是目前爲止element就是最好的支持vue2.0的UI組件。就像它的口號同樣，「快速成型，就爲讓你少加班」。

vue、React、Angular1對比
性能 對比

在Angular1中，在scope做用域中每一次數據變化，會觸發watcher的從新計算，angular對經常使用的dom事件，xhr事件等作了封裝， 在裏面觸發進入angular的digest流程。在digest流程裏面，會從rootscope開始遍歷， 檢查全部的watcher。而且，若是一些 watcher 觸發另外一個更新，髒檢查循環（digest cycle）可能要運行屢次。Vue則沒有這個問題，由於它使用基於依賴追蹤的觀察系統而且異步隊列更新，數據的變化都是獨立處罰的，除非數據之間有明確的依賴關係。
vue官方宣稱vue的渲染性能優於react。爲了有理有據讓人信服，vue開發團隊創建了一個簡單的對比性能的項目（https://github.com/chrisvfritz/vue-render-performance-comparisons），它負責渲染10000個列表項100次。Vue官方將每個參照項目都分別運行 20 次並取最好的結果結果以下圖：

因而可知，Vue的性能是遠好於Angular1，而且稍微優於React的。
社區拓展對比

Angular1的背後是Google，因此社區基礎是不須要擔憂的，從Tutorial到StackOverflow的問題數量均可以反映出生態系統很完整。Angular1以後的2.0版本幾乎是一個推翻重作的框架，對於使用了1.X版本的項目，想要平滑的升級過渡到2.0版本應該是很是困難的。如今Angular2的線上應用數量還不算太多，主流編碼仍是以1.X版本居多。這個版本化巨大的差別也間接影響到了開發者對於angular的信心。
Vue和React都有強大的社區支持。React有狀態管理庫Flux、ReduxVue，相應的，Vue有vuex。Vue 和 React 都提供了強大的路由庫來應對大型應用。然而Vue的路由庫和狀態管理庫都是由官方維護支持的。React 則是選擇把這些問題交給社區維護，所以建立了一個更分散的生態系統。但相對的，React 的生態系統相比 Vue 更加繁榮。此外，Vue 提供了Vue-cli 腳手架，包括了Webpack，Browserify，甚至路由庫，能讓你很是容易地構建項目。
學習陡峭度對比

在指令與組件方面，Vue中將指令和組件分得更清晰。指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元，有本身的視圖和數據邏輯。在 Angular1 中二者有很多相混的地方。在API與框架設計方面，angular1都比vue要複雜的多。就我的感受而言，angular1和React的學習曲線會相對陡峭一些，而vue的編碼方式會更趨近於前端開發者的編程習慣。
由於vue的做者是中國人，vue的官方網站、教程和api確定是最完善、最易懂的。此外，每次大版本的發佈，都會伴隨着詳盡的遷移說明文檔，包含了不少詳盡的闡述以及許多遷移的例子，甚至還有遷移工具。Angular的開發團隊大家就不以爲臉紅麼…
Vue的使用很是的簡單，建立一個本地的 .html 文件，而後經過以下方式引入 Vue：

這樣就生成了vue的hello world應用。
渲染能力對比

ReactNative能使你用相同的組件模型編寫有本地渲染能力的 APP（iOS 和 Android）。能同時跨多平臺開發，對開發者是很是棒的。爲了彌補這方面的不足，在2016年9月舉辦的JSConf2016期間，vue.js的做者尤雨溪宣佈加盟Weex團隊擔任技術顧問，雙方將進行更緊密的合做，共建開發生態圈。Weex 是阿里的跨平臺用戶界面開發框架，Weex 的 JavaScript 框架運行時用的就是 Vue。在此以後，在 Weex 的幫助下，使用 Vue 語法開發的組件不只僅能夠運行在瀏覽器端，還能被用於開發 iOS 和 Android 上的原生應用。
Vue.js 的做者尤雨溪表示：「Weex選擇Vue做爲其JavaScript運行時框架是讓我很是高興的一件事。Vue的組件開發模式已經被web開發者社區普遍 承認，而把Vue的開發體驗拓展到原平生臺則是我一直想作但沒有餘力去作的事情。一想到Weex將能讓開發者們用Vue的語法去寫跨 Web/Android/iOS三端的通用組件，就讓我很興奮。」
vue的缺點

Vue就這麼好，難道沒有缺點嗎？固然有，vue雖然在16年很是火爆，可是相比於angular和react，不管是成熟度仍是社區活躍度都還不是對手。此外，Vue明確聲明瞭本身放棄了對IE8的支持。再看看如今的招聘網站上，有多少寫了須要有angular經驗，而又有多少寫了須要vue經驗，就可見vue的影響力相比於angular和react還差的很遠。
vue全家桶及項目架構

Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上構建工具vue-cli，就是一個完整的vue項目的核心構成。
vue-router路由

推薦使用npm工具來安裝vue-router
npm install vue-router
經過import導入並定義Vue模塊、vue-router模塊和須要使用的組件，在本例中，分別是Goods、Ratings和Seller組件。最後，若是在一個模塊化工程中使用它，必需要經過 Vue.use() 明確地安裝路由功能。
import Vue from’vue’
importRouter from’vue-router’

import Goods from ‘@/components/goods/goods’;
import Ratings from ‘@/components/ratings/ratings’;
import Seller from ‘@/components/seller/seller’;

Vue.use(Router); // 須要import Vue和Router，否則會報錯undefined
經過const router= new VueRouter（）來定義一個路由，並傳入對應的配置，包括路徑path和組件components。

最後，在使用newVue來建立和掛載vue根實例的時候，記得要經過 router配置參數注入路由，即在router中export出來的路由對象，從而讓整個應用都有路由功能。

vuex狀態管理

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。如前面所提到的，Vuex 已經集成到 Vue 的官方調試工具vue Devtools，能夠輕鬆的查看項目中的Vuex狀態變化狀況。
假設有這樣一個場景：咱們的項目規模比較大，有多個父組件，每一個父組件同時又包含多個子組件。如何保持對全部時間的追蹤將變得很困難。到底哪一個事件是哪一個組件派發的，哪一個組件該監聽哪一個事件？父組件將變得和子組件耦合愈來愈嚴重，由於它須要明確的派發和監聽子組件的某些事件。項目邏輯分散在各個組件當中，很容易致使邏輯的混亂，不利於咱們項目的維護。
這就是 Vuex 用來解決的問題。 Vuex 的四個核心概念分別是：
The state tree：Vuex 使用單一狀態樹，用一個對象就包含了所有的應用層級狀態。至此它便做爲一個『惟一數據源(SSOT)』而存在。這也意味着，每一個應用將僅僅包含一個 store 實例。單狀態樹讓咱們可以直接地定位任一特定的狀態片斷，在調試的過程當中也能輕易地取得整個當前應用狀態的快照。
Getters：用來從 store 獲取 Vue 組件數據。
Mutators：事件處理器用來驅動狀態的變化。
Actions：能夠給組件使用的函數，以此用來驅動事件處理器 mutations
Vuex和簡單的全局對象是不一樣的，當Vuex從store中讀取狀態值的時候，若狀態發生了變化，那麼相應的組件也會高效的更新。而且，改變store中狀態的惟一途徑就是提交commit mutations。這樣便於咱們跟蹤每一次狀態的變化。只要發生了狀態的變化，必定伴隨着mutation的提交。
讓咱們來看一個最簡單的vuex例子：

安裝 Vuex 以後，讓咱們來建立一個 store。建立過程直截了當——僅須要提供一個初始 state 對象和一些 mutations：

如今，你能夠經過 store.state 來獲取狀態對象，以及經過 store.commit 方法觸發狀態變動：
vue-resource介紹

Vue-resource有體積小，支持IE9以上的瀏覽器，支持promise特性的特色。一樣推薦使用npm來安裝Vue-resource。
$ npm install vue-resource
在安裝並引入vue-resource後，能夠基於全局的Vue對象使用http，也能夠基於某個Vue實例使用http。

在發送請求後，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。
vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：
· get(url,[options])
· head(url,[options])
· delete(url,[options])
· jsonp(url,[options])
· post(url,[body], [options])
· put(url, [body],[options])
· patch(url,[body], [options])
vue工程目錄結構

下圖是一個簡單的vue項目的大概結構，下面簡要介紹一下每一個文件夾中通常都會存放哪些內容。

components/文件夾用來存放Vue 組件。我的建議，把每個組件中使用到的image圖片放置到對應的組件子文件目錄下，便於統一的管理
Node_modules/npm安裝的該項目的依賴庫
vuex/文件夾存放的是和 Vuex store 相關的東西（state對象，actions，mutations)
router/文件夾存放的是跟vue-router相關的路由配置項
build/文件是 webpack 的打包編譯配置文件
static/文件夾存放一些靜態的、較少變更的image或者css文件
config/文件夾存放的是一些配置項，好比服務器訪問的端口配置等
dist/該文件夾一開始是不存在，在咱們的項目通過 build 以後纔會產出
App.vue根組件，全部的子組件都將在這裏被引用
index.html整個項目的入口文件，將會引用咱們的根組件 App.vue
main.js入口文件的 js 邏輯，在webpack 打包以後將被注入到 index.html 中
vue中less的應用

在vue項目中同樣可使用less預編譯，只是須要使用npm安裝less-loader插件。安裝完成後，在vue中的css模塊進行簡單的配置，這樣就能夠直接使用less來編寫樣式表了。在打包編譯的時候，會自動生成對應的css樣式。
vue合實例講解Vue核心功能

Vue的功能有不少，很難一一進行詳細的解釋。下面根據在工做中的項目實例，結合代碼解釋一下vue的幾大核心功能。
計算屬性

假設有以下的購物車結算場景，用戶選中商品的總金額是根據商品數量、選中商品種類數
和商品單價來變化的。然而，數量、選中種類數量和單價這幾個對象都是根據用戶選擇而動態變化的，若是在前端模版中爲了計算最終商品總額，放入這幾個動態變化的變量（商品數量、商品單價、選中商品種類），會讓這個邏輯變得複雜難以維護。在這種狀況下，模版便再也不簡潔清晰。Vue給出了此種場景的解決方案，在任何複雜的邏輯，vue都推薦使用計算屬性。

如上圖所示，在html中，咱們只須要使用{{totalPrice}}這個計算屬性就能夠來表示最終的商品總額。咱們不須要關注這個變量的數值變化，totalPrice這個變量的邏輯寫在對應的computed計算屬性中。
也許會有疑問，這個計算屬性和定義一個method方法不是差很少麼？這二者最大的區別是計算屬性是基於它的依賴進行緩存的。計算屬性只有在它的相關依賴發生變化時纔會從新計算求值。在本例中，只有當選擇商品的價格price和數量count發生變化時，這個計算屬性totalPrice纔會從新計算新的值。這就意味着，只要totalPrice這個值沒有發生變化，屢次訪問該計算屬性會當即返回以前的計算結果，而沒必要再次執行計算。
模版語法

Vue.js 使用了基於 HTML 的模版語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。Vue的模版語法包括了使用雙大括號插入文本、使用v-html插入純HTML內容、使用v-bind插入對象、相似angular的v-if、v-show、v-for指令、以及過濾器等等。

組件化

組件（Component）是 Vue.js 最強大的功能。組件能夠封裝可重用的代碼，經過傳入對象的不一樣，實現組件的複用。
舉一個簡單的組建例子，咱們首先編寫一個star組件，它就是一個普通的star.vue文件。它的做用就是簡單實現了一個五角星。
如何在其餘的vue文件中使用這個star組件呢？以下圖所示，首先經過import引入star組件對象，並在想使用star組件的vue文件中聲明註冊star組件。如今就能夠愉快的經過標籤來在該vue文件中任意地方使用star組件了。在你想展現一個五角星的地方，使用一個star標籤，就能夠輕鬆完成這個功能。
組件實例的做用域是孤立的。這意味着不能在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，咱們須要經過子組件的props選項。如本例所示，子組件star要顯式的使用props選項聲明它期待得到的數據。在這裏就是指的「size」和「score」兩個變量。咱們能夠經過父級給子組件star傳入大小和數值這兩個對象，來實現對子組件的定製化。

過渡效果

Vue 在插入、更新或者移除 DOM 時，提供多種不一樣方式的應用過渡效果，能夠用簡單的幾行代碼實現酷炫的過渡效果。Vue 提供了 transition 的封裝組件，在使用v-if、v-show等方法使得transition內部dom元素髮生變化時，能夠給任何元素和組件添加 entering/leaving 過渡。
當v-show中內容發生變化時，transition組件中的元素會發生狀態的改變，在應用了transition封裝後，Vue會自動識別目標元素是否應用了CSS過渡效果動畫，若是有，會在合適的時機添加 entering/leaving的class來實現該過渡效果。
下圖所示是一個簡單的過渡效果的例子，須要將想實現過渡效果的元素放在transition標籤中包裹，經過name=「slide-fade」來聲明過渡效果名稱，並在對應的vue文件中添加過渡效果
的css樣式，這樣就能夠簡單的完成該元素的過渡效果。

總結

根據不徹底統計，包括餓了麼、稀土掘金、蘇寧易購、美團、天貓、荔枝FM、房多多、Laravel、htmlBurger等國內外知名大公司都在使用vue進行新項目的開發和舊項目的前端重構工做。 此外，vue + vuex+ vue-resource + vue-router + webpack + es6 + less的項目架構成爲了愈來愈多大公司的第一選擇。