如果你是 Vue 開發(fā)新手，可能已經(jīng)聽過(guò)很多行話術(shù)語(yǔ)，比如單頁(yè)面應(yīng)用程序、異步組件、服務(wù)器端渲染，等等。你可能還聽說(shuō)過(guò)與 Vue 有關(guān)的一些工具和庫(kù)，比如 Vuex、Webpack、Vue CLI 和 Nuxt。
浸沒(méi)在術(shù)語(yǔ)和工具的浩瀚海洋中難免會(huì)令人感到沮喪，但其實(shí)并不是只有你一個(gè)人有這種感受，所有經(jīng)驗(yàn)水平的開發(fā)人員都會(huì)持續(xù)感覺(jué)到這種莫名的壓力。
一口氣吃不成胖子，試圖一下子學(xué)習(xí)所有東西可能是徒勞的，所以我將在這篇文章中展示一個(gè)高級(jí)“知識(shí)地圖”，它包含了與 Vue 開發(fā)相關(guān)的關(guān)鍵領(lǐng)域，你可以使用這張地圖作為 2019 年學(xué)習(xí) Vue 的圖鑒。
0. JavaScript 和基本的 Web 開發(fā)
如果我要你學(xué)習(xí)中文書籍中所寫的內(nèi)容，你首先要學(xué)會(huì)中文，對(duì)吧？
同樣，Vue 是一個(gè)用于構(gòu)建 Web 用戶界面的 JavaScript 框架。在開始使用 Vue 之前，你必須了解 JavaScript 和 Web 開發(fā)的基礎(chǔ)知識(shí)。
1. Vue 基本概念
如果你是 Vue 開發(fā)新手，應(yīng)該專注于 Vue.js 生態(tài)系統(tǒng)的核心，包括 Vue 核心庫(kù)、Vue Router 和 Vuex。
這些工具將被用在大多數(shù) Vue 應(yīng)用程序中，并為本文中提到的其他領(lǐng)域提供了一個(gè)構(gòu)建框架。
Vue 核心功能
從根本上說(shuō)，Vue 用于同步網(wǎng)頁(yè)和 JavaScript。實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵特性是反應(yīng)式（reactive）數(shù)據(jù)，以及指令和插值等模板功能。這些東西在一開始就要學(xué)習(xí)。
要構(gòu)建你的第一個(gè) Vue 應(yīng)用程序，你還需要知道如何在網(wǎng)頁(yè)中安裝 Vue，并了解 Vue 實(shí)例的生命周期。
組件
Vue 組件是獨(dú)立的可重用 UI 元素。你需要了解如何聲明組件，以及如何通過(guò) prop 和 event 在它們之間發(fā)生交互。
了解如何組合組件也很重要，因?yàn)檫@對(duì)使用 Vue 構(gòu)建健壯、可伸縮的應(yīng)用程序來(lái)說(shuō)至關(guān)重要。
單頁(yè)面應(yīng)用程序
單頁(yè)面應(yīng)用程序（SPA）架構(gòu)通過(guò)單個(gè)網(wǎng)頁(yè)實(shí)現(xiàn)傳統(tǒng)多頁(yè)面網(wǎng)站一樣的功能，而且不會(huì)在每次用戶觸發(fā)導(dǎo)航時(shí)重新加載和重建頁(yè)面。
在將“頁(yè)面”構(gòu)建為 Vue 組件之后，就可以使用 Vue Router 將每個(gè)“頁(yè)面”映射到一個(gè)唯一的路徑，Vue Router 是一個(gè)用于構(gòu)建 SPA 的工具，由 Vue 團(tuán)隊(duì)維護(hù)。
狀態(tài)管理
隨著應(yīng)用程序變得越來(lái)越大，SPA 頁(yè)面中會(huì)有很多組件，管理全局狀態(tài)變得很困難，而且隨著 prop 和 event 監(jiān)聽器的增加，組件變得越來(lái)越臃腫。
一種稱為“Flux”的特殊模式可以將數(shù)據(jù)保存在可預(yù)測(cè)且穩(wěn)定的中央存儲(chǔ)中。由 Vue 團(tuán)隊(duì)維護(hù)的 Vuex 庫(kù)可以幫助你在 Vue.js 應(yīng)用程序中實(shí)現(xiàn) Flux。
2. 現(xiàn)實(shí)世界中的 Vue
以上的知識(shí)可用于構(gòu)建高性能的 Vue 應(yīng)用程序，但如何將它們部署到生產(chǎn)環(huán)境中？
如果你想將基于 Vue.js 的產(chǎn)品發(fā)送給真實(shí)用戶，你還需要了解更多東西！
項(xiàng)目腳手架
如果你經(jīng)常構(gòu)建 Vue 應(yīng)用程序，你會(huì)發(fā)現(xiàn)幾乎每個(gè)項(xiàng)目都需要提供配置、設(shè)置和開發(fā)者工具。
Vue 團(tuán)隊(duì)維護(hù)了一個(gè)叫作 Vue CLI 的工具，讓你可以在幾分鐘內(nèi)啟動(dòng)一個(gè)強(qiáng)大的 Vue 開發(fā)環(huán)境。
全?；蛘J(rèn)證的應(yīng)用程序
真實(shí)的 Vue 應(yīng)用程序通常是由數(shù)據(jù)驅(qū)動(dòng)的用戶界面。數(shù)據(jù)通常來(lái)自使用 Node、Laravel、Rails、Django 或其他服務(wù)器框架開發(fā)的 API。
這些數(shù)據(jù)可能是由傳統(tǒng)的 REST API 或 GraphQL 提供的數(shù)據(jù)，也可能是通過(guò) Web 套接字提供的實(shí)時(shí)數(shù)據(jù)。
你還需要了解將 Vue 集成到完整技術(shù)棧中常用設(shè)計(jì)模式，以及確保 Vue 應(yīng)用程序用戶數(shù)據(jù)的安全性。
測(cè)試
如果你想開發(fā)出可維護(hù)且穩(wěn)定的 Vue 應(yīng)用程序，需要對(duì)它們進(jìn)行測(cè)試。
在 Vue 應(yīng)用程序中，可以通過(guò)單元測(cè)試來(lái)確保你的組件能夠?yàn)榻o定輸入（即 prop 或用戶輸入）提供相同的輸出（即重新渲染的 HTML 或發(fā)出的事件）。
Vue 團(tuán)隊(duì)維護(hù)了一個(gè)叫作 Vue Test Utils 的工具，用于測(cè)試單獨(dú)的 Vue 組件。
優(yōu)化
當(dāng)你將應(yīng)用程序部署到遠(yuǎn)程服務(wù)器并且用戶通過(guò)慢連接訪問(wèn)它時(shí)，它與你在開發(fā)環(huán)境中測(cè)試的速度和效率是不一樣的。
為了優(yōu)化 Vue 應(yīng)用程序，我們可以采用各種技術(shù)，包括服務(wù)器端渲染，也就是在服務(wù)器端執(zhí)行 Vue 應(yīng)用程序，然后輸出 HTML 頁(yè)面并傳給用戶。
其他優(yōu)化手段還包括使用異步組件和渲染函數(shù)。
3. 關(guān)鍵的相關(guān)工具
到目前為止，我們所看到的一切都來(lái)自 Vue.js 核心，或來(lái)自生態(tài)系統(tǒng)中的工具。但 Vue 不是孤立存在的，它只是前端技術(shù)棧中的一層。
高級(jí) Vue 開發(fā)人員不僅需要熟悉 Vue，還需要熟悉每個(gè) Vue 項(xiàng)目的關(guān)鍵工具。
現(xiàn)代 JavaScript 和 Babel
Vue 應(yīng)用程序可以使用 ES5 開發(fā)，ES5 是幾乎所有瀏覽器都支持的 JavaScript 標(biāo)準(zhǔn)。
要獲得增強(qiáng)的 Vue 開發(fā)體驗(yàn)，并利用新的瀏覽器功能，你可以使用最新的 JavaScript 標(biāo)準(zhǔn) ES2015 和 ES2016 或更高版本提供的功能來(lái)構(gòu)建 Vue 應(yīng)用程序。
不過(guò)，如果你選擇使用現(xiàn)代 JavaScript，就需要提供一種支持舊版瀏覽器的方法，否則你的產(chǎn)品可能無(wú)法為大多數(shù)用戶提供服務(wù)。
要實(shí)現(xiàn)這一目的，需要使用 Babel。它的作用是在應(yīng)用程序發(fā)布之前將你的現(xiàn)代功能“轉(zhuǎn)換”（翻譯和編譯）為標(biāo)準(zhǔn)功能。
WebPack
Webpack 是模塊捆綁器，如果你的代碼跨越了不同模塊（例如不同的 JavaScript 文件），Webpack 可以將這些零散的代碼“構(gòu)建”到瀏覽器可讀的單個(gè)文件中。
Webpack 還可以作為構(gòu)建管道，你可以在構(gòu)建代碼之前對(duì)代碼進(jìn)行轉(zhuǎn)換，例如使用 Babel、Sass 或 TypeScript，還可以使用一系列插件來(lái)優(yōu)化你的應(yīng)用程序。
很多開發(fā)人員覺(jué)得 Webpack 難以掌握，配置起來(lái)也很麻煩，但如果沒(méi)有它，將無(wú)法使用 Vue 的一些有用的功能（如單文件組件）。
最近發(fā)布的 Vue CLI 3 提供了一種用于在 Vue 項(xiàng)目中抽象和自動(dòng)配置 Webpack 的解決方案。
這是否意味著你不需要學(xué)習(xí) Webpack 了？當(dāng)然不是，因?yàn)槟闳匀徊豢杀苊獾匦枰M(jìn)行定制或調(diào)試 Webpack 配置。
TypeScript
TypeScript 是 JavaScript 語(yǔ)言的超集，為我們提供了類型（String、Boolean、Number 等），這樣我們就可以編寫健壯的代碼，并盡早發(fā)現(xiàn)錯(cuò)誤。
Vue.js 3 將于 2019 年推出，將完全使用 TypeScript 編寫。但這并不意味著你一定要在你的 Vue 項(xiàng)目中使用它，但如果你想要為 Vue 貢獻(xiàn)代碼，或者想要理解它的內(nèi)部工作原理，就需要了解 TypeScript。
4. Vue 的框架
構(gòu)建在 Vue 之上的框架讓你無(wú)需從頭開始實(shí)現(xiàn)服務(wù)器端渲染，還可以創(chuàng)建自己的組件庫(kù)以及完成很多其他常見任務(wù)。
有很多很好的 Vue 框架，在這里我們只列出使用最為廣泛和最重要的三個(gè)框架。
Nuxt.js
如果你想要構(gòu)建一個(gè)高性能的 Vue 應(yīng)用程序，就需要基于組件的路由、服務(wù)器端渲染、代碼拆分和其他尖端的功能。你還需要像 SEO 標(biāo)簽這樣的功能。
Nuxt.js 通過(guò)各種社區(qū)插件提供了這些開箱即用的功能，以及更多的功能選項(xiàng)，如 PWA。
Vuetify
谷歌的 Material Design 是一個(gè)使用十分廣泛的指南，用于構(gòu)建漂亮的邏輯用戶界面，并被用在谷歌的產(chǎn)品（如 Android 和 Web）當(dāng)中。
Vuetify 在一系列 Vue 組件中實(shí)現(xiàn)了 Material Design。因此，你可以使用 Material Design 布局和樣式快速構(gòu)建 Vue 應(yīng)用程序，以及模態(tài)、警報(bào)、導(dǎo)航欄、分頁(yè)等小部件。
NativeScript-Vue
Vue.js 是一個(gè)用于構(gòu)建 Web 用戶界面的庫(kù)。如果你想將它用于原生移動(dòng)界面，可以使用 NativeScript-Vue 框架。
NativeScript 是一個(gè)用于在 iOS 和 Android 上使用原生用戶界面組件構(gòu)建應(yīng)用程序的系統(tǒng)，而 NativeScript-Vue 是一個(gè)基于 NativeScript 的框架，提供了 Vue 的語(yǔ)法和組件的使用方式。
5. 雜項(xiàng)
在最后一部分，我們將介紹其他一些內(nèi)容。
插件開發(fā)
如果要在項(xiàng)目中重用 Vue 功能或?yàn)?Vue 生態(tài)系統(tǒng)做貢獻(xiàn)，可以將功能作為 Vue 插件來(lái)開發(fā)。
動(dòng)畫
如果你需要使用動(dòng)畫，請(qǐng)了解一下 Vue 的過(guò)渡系統(tǒng)，它也是 Vue 核心的一部分。你可以在向 DOM 添加元素或從 DOM 中刪除元素時(shí)應(yīng)用動(dòng)畫。
你需要?jiǎng)?chuàng)建 CSS 類來(lái)定義所需的動(dòng)畫效果，無(wú)論是淡入淡出、更改顏色還是你喜歡的其他方式。當(dāng)向 DOM 中添加元素或從 DOM 中刪除元素時(shí)，Vue 會(huì)檢測(cè)到這些變更，并在過(guò)渡期間添加或刪除相應(yīng)的 CSS 類。
漸進(jìn)式 Web 應(yīng)用程序
漸進(jìn)式 Web 應(yīng)用程序（PWA）就像普通的 Web 應(yīng)用程序一樣，只是加入了改進(jìn)的用戶體驗(yàn)。例如，PWA 可能包括脫機(jī)緩存、服務(wù)器端渲染、推送通知等。
大多數(shù) PWA 功能可以通過(guò) Vue CLI 3 插件或使用 Nuxt.js 等框架添加到 Vue 應(yīng)用程序中，但你仍然需要了解一些關(guān)鍵技術(shù)，包括 Web App Manifest 和 ServiceWorker。
英文原文：
https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map/
