Vue學習路線圖

Vue 概述

如果你是一名 Vue 開發新手，可能已經聽過很多行話術語，比如單頁面應用程式、異步元件、伺服器端渲染等等，或者還聽說過與 Vue 有關的一些工具和庫，比如 Vuex、Webpack、Vue CLI 和 Nuxt。

那麼究竟什麼是Vue，有什麼作用？

Vue.js是一套用于建構使用者界面的漸進式架構，主要用于快速的建構前端界面，與其它大型的前端架構不同，Vue被設計為可以自底向上逐層應用。

相比Angular.js來說，Vue的核心庫隻關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合，是初創項目的前端首選架構。另一方面，當與現代化的工具鍊以及各種支援類庫結合使用時，Vue也完全能夠為複雜的單頁應用提供驅動。

單獨來說，Vue.js是一個用于建構使用者界面的前端庫，本身就具有響應式程式設計群組件化的諸多優點。所謂響應式程式設計，即是一種面向資料流和變化傳播的程式設計範式，可以在程式設計語言中很友善地表達靜态或動态的資料流，而相關的計算模型會自動将變化的值通過資料流進行傳播。

響應式程式設計在前端開發中得到了大量的應用，在大多數前端MVX架構都可以看到它的影子。相比較于Angular.js和React.js而言，Vue.js并沒有引入太多的新概念，隻是對已有的概念進行了精簡。并且，Vue.js很好的借鑒了React.js的元件化思想，使應用開發起來更加容易，真正實作了子產品化開發的目的。

相比于Angular.js和React.js而言，Vue.js一直以輕量級、易上手而被人稱道。MVVM的開發模式也使前端從傳統的DOM操作中釋放出來，開發者不需要再把時間浪費在視圖和資料的維護上，隻需要關注data的變化即可。并且，Vue的渲染層基于輕量級的virtual-DOM實作，在大多數的場景下初始化速度和記憶體消耗都提高2-4倍。同時，越來越多的移動用戶端也開始支援使用Vue.js來進行開發，可以堅信使用Vue.js打造三端一緻的Native應用将變成可能。

作為一個新興的前端架構，Vue.js大量借鑒和參考了Angular.js和React.js等優秀的前端架構。而在版本支援上，Vue.js抛棄了對IE8的支援，對移動端的支援也有一定的要求，也即是說使用Vue.js進行移動跨平台開發時需要Android 4.2+和iOS 7+支援。

如果讀者所在的項目是一個前後端分離的項目，亦或者是一個創業項目，想使用Vue.js打造三端一緻的Native體驗，那麼Vue.js将是一個不錯的選擇。

Vue 線路圖

俗話說，一口氣吃不成胖子。對于一個新手，又如何學習Vue呢？還需要如何進階呢？又需要掌握哪些進階知識？為了解答這些疑問，下面看一張Vue的技能圖。

JavaScript 與Web基礎

Vue 作為一個用于建構 Web 使用者界面的 JavaScript 架構，在開始使用 Vue 之前，你必須了解 JavaScript 和 Web 開發的基礎知識。

并且還需要掌握一些 Vue.js 生态系統的核心知識，包括 Vue 核心庫、Vue Router 和 Vuex。

Vue 核心功能

從根本上說，Vue 就是一個用于同步網頁的JavaScript技術架構。實作這一目标的關鍵特性是反應式（reactive）資料，以及指令和插值等模闆功能。

要建構一個 Vue 應用程式，你還需要知道如何在網頁中安裝 Vue，并了解 Vue 執行個體的生命周期等知識。

元件

其次，Vue 元件是獨立的可重用 UI 元素。是以，你需要了解如何聲明元件，以及如何通過 prop 和 event 在它們之間發生互動。

了解如何組合元件也很重要，因為這對使用 Vue 建構健壯、可伸縮的應用程式來說至關重要。

單頁面應用程式

單頁面應用程式（SPA）架構通過單個網頁實作傳統多頁面網站一樣的功能，而且不會在每次使用者觸發導航時重新加載和重建頁面。

在将“頁面”建構為 Vue 元件之後，就可以使用 Vue Router 将每個“頁面”映射到一個唯一的路徑，Vue Router 是一個用于建構 SPA 的工具，由 Vue 團隊維護。

狀态管理

随着應用程式變得越來越大，項目變得越來越複雜，SPA 頁面中會有很多元件，管理全局狀态變得異常困難，而且随着 prop 和 event 監聽器的增加，元件變得越來越臃腫。

這時候，一種稱為Flux的特殊模式就出現了，它可以将資料儲存在可預測且穩定的中央存儲中。由 Vue 團隊維護的 Vuex 庫可以幫助你在 Vue.js 應用程式中實作 Flux。

實戰中的Vue

腳手架

如果你經常建構 Vue 應用程式，你會發現幾乎每個項目都需要提供配置、設定和開發者工具。

Vue 團隊維護了一個叫作 Vue CLI 的工具，讓你可以在幾分鐘内啟動一個強大的 Vue 開發環境。

全棧應用程式

在實際開發中，真實的 Vue 應用程式通常是由資料來驅動使用者界面渲染的。資料通常來自使用 Node、Laravel、Rails、Django 或其他伺服器架構開發的 API。

這些資料可能是由傳統的 REST API 或 GraphQL 提供的資料，也可能是通過 Web 套接字提供的實時資料。

是以，你還需要了解将 Vue 內建到完整技術棧中常用設計模式，以及確定 Vue 應用程式使用者資料的安全性。

測試

如果你想開發出可維護且穩定的 Vue 應用程式，你還需要對它們進行測試（如單元測試、快照測試、黑盒測試等）。

在 Vue 應用程式中，可以通過單元測試來確定你的元件能夠為給定輸入（即 prop 或使用者輸入）提供相同的輸出（即重新渲染的 HTML 或發出的事件）。

Vue 團隊維護了一個叫作 Vue Test Utils 的工具，用于測試單獨的 Vue 元件。

優化

當你将應用程式部署到遠端伺服器并且使用者通過慢連接配接通路它時，它與你在開發環境中測試的速度和效率是不一樣的。

為了優化 Vue 應用程式，我們可以采用各種技術，包括伺服器端渲染，也就是在伺服器端執行 Vue 應用程式，然後輸出 HTML 頁面并傳給使用者。其他優化手段還包括使用異步元件和渲染函數。

開發工具

俗話說，磨刀不誤砍柴工，寫代碼也一樣，掌握Vue開發相關的工具和腳手架，可以大大的提高開發效率。

JavaScript 和 Babel

要獲得增強的 Vue 開發體驗，并利用新的浏覽器功能，你可以使用最新的 JavaScript 标準 ES2015 和 ES2016 或更高版本提供的功能來建構 Vue 應用程式。

不過，如果你選擇使用現代 JavaScript，就需要提供一種支援舊版浏覽器的方法，否則你的産品可能無法為大多數使用者提供服務。

要實作這一目的，您可以使用 Babel。它的作用是在應用程式釋出之前将你的現代功能“轉換”（翻譯和編譯）為标準文法，如将ES6翻譯為浏覽器能夠識别的ES5。

WebPack

Webpack 是子產品捆綁器，如果你的代碼跨越了不同子產品（例如不同的 JavaScript 檔案），Webpack 可以将這些零散的代碼“建構”到浏覽器可讀的單個檔案中。

Webpack 還可以作為建構管道，你可以在建構代碼之前對代碼進行轉換，例如使用 Babel、Sass 或 TypeScript，還可以使用一系列插件來優化你的應用程式。

很多開發人員覺得 Webpack 難以掌握，配置起來也很麻煩，但如果沒有它，将無法使用 Vue 的一些有用的功能（如單檔案元件）。

最近釋出的 Vue CLI 3 提供了一種用于在 Vue 項目中抽象和自動配置 Webpack 的解決方案。

這是否意味着你不需要學習 Webpack 了？當然不是，因為你仍然不可避免地需要進行定制或調試 Webpack 配置。

TypeScript

TypeScript 是 JavaScript 語言的超集，本質上向這個語言添加了可選的靜态類型和基于類的面向對象程式設計。為我們提供了類型（如String、Boolean、Number 等），這樣我們就可以編寫健壯的代碼，并盡早發現錯誤。

将于 2019 年推出的Vue.js 3版本 ，将完全使用 TypeScript 編寫。是以學習TypeScript顯得很有必要。

Vue 的架構

建構在 Vue 之上的架構可以讓你無需從頭開始實作伺服器端渲染，還可以建立自己的元件庫以及定制很多其他常見的任務。

Nuxt.js

如果你想要建構一個高性能的 Vue 應用程式，就需要基于元件的路由、伺服器端渲染、代碼拆分和其他功能進行實習。

Nuxt.js 作為一個基于 Vue.js 的輕量級應用架構,可用來建立服務端渲染 (SSR) 應用,也可充當靜态站點引擎生成靜态站點應用,具有優雅的代碼結構分層和熱加載等特性。

Nuxt.js 通過各種社群插件提供了這些開箱即用的功能，以及更多的功能選項，如 PWA。

Vuetify

谷歌的 Material Design 是一個使用十分廣泛的頁面樣式指南，用于建構漂亮的邏輯使用者界面，并被用在谷歌的産品（如 Android 和 Web）當中。

Vuetify 在一系列 Vue 元件中實作了 Material Design。是以，你可以使用 Material Design 布局和樣式快速建構 Vue 應用程式，以及模态、警報、導航欄、分頁等小部件。

Vuetify支援SSR(服務端渲染)，SPA(單頁應用程式)，PWA(漸進式web應用程式)和标準HTML頁面。

NativeScript-Vue

Vue.js 是一個用于建構 Web 使用者界面的庫。如果你想将它用于原生移動界面，可以使用 NativeScript-Vue 架構。

NativeScript 是一個用于在 iOS 和 Android 上使用原生使用者界面元件建構應用程式的系統，而 NativeScript-Vue 是一個基于 NativeScript 的架構，提供了 Vue 的文法群組件的使用方式。

其他

插件開發

如果要在項目中重用 Vue 功能或為 Vue 生态系統做貢獻，可以将功能作為 Vue 插件來開發。

動畫

如果你需要使用動畫，那麼你需要了解一下 Vue 的過渡系統，它也是 Vue 核心的一部分。你可以通過在向 DOM 添加元素或從 DOM 中删除元素時應用動畫。

你需要建立 CSS 類來定義所需的動畫效果，無論是淡入淡出、更改顔色還是你喜歡的其他方式。當向 DOM 中添加元素或從 DOM 中删除元素時，Vue 會檢測到這些變更，并在過渡期間添加或删除相應的 CSS 類。

漸進式 Web 應用程式

漸進式 Web 應用程式（PWA）就像普通的 Web 應用程式一樣，隻是加入了改進的使用者體驗。例如，PWA 可能包括脫機緩存、伺服器端渲染、推送通知等。