如果你是 Vue 開發(fā)新手，可能已經(jīng)聽過很多行話術(shù)語盐固，比如單頁面應(yīng)用程序荒给、異步組件、服務(wù)器端渲染刁卜，等等志电。你可能還聽說過與 Vue 有關(guān)的一些工具和庫，比如 Vuex蛔趴、Webpack溪北、Vue CLI 和 Nuxt。
浸沒在術(shù)語和工具的浩瀚海洋中難免會令人感到沮喪夺脾，但其實并不是只有你一個人有這種感受之拨，所有經(jīng)驗水平的開發(fā)人員都會持續(xù)感覺到這種莫名的壓力。
一口氣吃不成胖子咧叭，試圖一下子學(xué)習(xí)所有東西可能是徒勞的蚀乔，所以我將在這篇文章中展示一個高級“知識地圖”，它包含了與 Vue 開發(fā)相關(guān)的關(guān)鍵領(lǐng)域菲茬，你可以使用這張地圖作為 2019 年學(xué)習(xí) Vue 的圖鑒吉挣。
0. JavaScript 和基本的 Web 開發(fā)
如果我要你學(xué)習(xí)中文書籍中所寫的內(nèi)容，你首先要學(xué)會中文婉弹，對吧睬魂？
同樣，Vue 是一個用于構(gòu)建 Web 用戶界面的 JavaScript 框架镀赌。在開始使用 Vue 之前氯哮，你必須了解 JavaScript 和 Web 開發(fā)的基礎(chǔ)知識。
1. Vue 基本概念
如果你是 Vue 開發(fā)新手商佛，應(yīng)該專注于 Vue.js 生態(tài)系統(tǒng)的核心喉钢，包括 Vue 核心庫、Vue Router 和 Vuex良姆。
這些工具將被用在大多數(shù) Vue 應(yīng)用程序中肠虽，并為本文中提到的其他領(lǐng)域提供了一個構(gòu)建框架。
Vue 核心功能
從根本上說玛追，Vue 用于同步網(wǎng)頁和 JavaScript税课。實現(xiàn)這一目標(biāo)的關(guān)鍵特性是反應(yīng)式（reactive）數(shù)據(jù)闲延，以及指令和插值等模板功能。這些東西在一開始就要學(xué)習(xí)韩玩。
要構(gòu)建你的第一個 Vue 應(yīng)用程序垒玲，你還需要知道如何在網(wǎng)頁中安裝 Vue，并了解 Vue 實例的生命周期啸如。
組件
Vue 組件是獨立的可重用 UI 元素侍匙。你需要了解如何聲明組件，以及如何通過 prop 和 event 在它們之間發(fā)生交互叮雳。
了解如何組合組件也很重要想暗，因為這對使用 Vue 構(gòu)建健壯、可伸縮的應(yīng)用程序來說至關(guān)重要帘不。
單頁面應(yīng)用程序
單頁面應(yīng)用程序（SPA）架構(gòu)通過單個網(wǎng)頁實現(xiàn)傳統(tǒng)多頁面網(wǎng)站一樣的功能说莫，而且不會在每次用戶觸發(fā)導(dǎo)航時重新加載和重建頁面。
在將“頁面”構(gòu)建為 Vue 組件之后寞焙，就可以使用 Vue Router 將每個“頁面”映射到一個唯一的路徑储狭，Vue Router 是一個用于構(gòu)建 SPA 的工具，由 Vue 團隊維護捣郊。
狀態(tài)管理
隨著應(yīng)用程序變得越來越大辽狈，SPA 頁面中會有很多組件，管理全局狀態(tài)變得很困難呛牲，而且隨著 prop 和 event 監(jiān)聽器的增加刮萌，組件變得越來越臃腫。
一種稱為“Flux”的特殊模式可以將數(shù)據(jù)保存在可預(yù)測且穩(wěn)定的中央存儲中娘扩。由 Vue 團隊維護的 Vuex 庫可以幫助你在 Vue.js 應(yīng)用程序中實現(xiàn) Flux着茸。
2. 現(xiàn)實世界中的 Vue
以上的知識可用于構(gòu)建高性能的 Vue 應(yīng)用程序，但如何將它們部署到生產(chǎn)環(huán)境中琐旁？
如果你想將基于 Vue.js 的產(chǎn)品發(fā)送給真實用戶涮阔，你還需要了解更多東西！
項目腳手架
如果你經(jīng)常構(gòu)建 Vue 應(yīng)用程序灰殴，你會發(fā)現(xiàn)幾乎每個項目都需要提供配置敬特、設(shè)置和開發(fā)者工具。
Vue 團隊維護了一個叫作 Vue CLI 的工具验懊，讓你可以在幾分鐘內(nèi)啟動一個強大的 Vue 開發(fā)環(huán)境擅羞。
全棧或認(rèn)證的應(yīng)用程序
真實的 Vue 應(yīng)用程序通常是由數(shù)據(jù)驅(qū)動的用戶界面义图。數(shù)據(jù)通常來自使用 Node、Laravel召烂、Rails碱工、Django 或其他服務(wù)器框架開發(fā)的 API。
這些數(shù)據(jù)可能是由傳統(tǒng)的 REST API 或 GraphQL 提供的數(shù)據(jù)，也可能是通過 Web 套接字提供的實時數(shù)據(jù)怕篷。
你還需要了解將 Vue 集成到完整技術(shù)棧中常用設(shè)計模式历筝，以及確保 Vue 應(yīng)用程序用戶數(shù)據(jù)的安全性。
測試
如果你想開發(fā)出可維護且穩(wěn)定的 Vue 應(yīng)用程序廊谓，需要對它們進行測試梳猪。
在 Vue 應(yīng)用程序中，可以通過單元測試來確保你的組件能夠為給定輸入（即 prop 或用戶輸入）提供相同的輸出（即重新渲染的 HTML 或發(fā)出的事件）蒸痹。
Vue 團隊維護了一個叫作 Vue Test Utils 的工具春弥，用于測試單獨的 Vue 組件。
優(yōu)化
當(dāng)你將應(yīng)用程序部署到遠(yuǎn)程服務(wù)器并且用戶通過慢連接訪問它時叠荠，它與你在開發(fā)環(huán)境中測試的速度和效率是不一樣的匿沛。
為了優(yōu)化 Vue 應(yīng)用程序，我們可以采用各種技術(shù)榛鼎，包括服務(wù)器端渲染逃呼，也就是在服務(wù)器端執(zhí)行 Vue 應(yīng)用程序，然后輸出 HTML 頁面并傳給用戶者娱。
其他優(yōu)化手段還包括使用異步組件和渲染函數(shù)抡笼。
3. 關(guān)鍵的相關(guān)工具
到目前為止，我們所看到的一切都來自 Vue.js 核心黄鳍，或來自生態(tài)系統(tǒng)中的工具推姻。但 Vue 不是孤立存在的，它只是前端技術(shù)棧中的一層际起。
高級 Vue 開發(fā)人員不僅需要熟悉 Vue拾碌，還需要熟悉每個 Vue 項目的關(guān)鍵工具。
現(xiàn)代 JavaScript 和 Babel
Vue 應(yīng)用程序可以使用 ES5 開發(fā)街望，ES5 是幾乎所有瀏覽器都支持的 JavaScript 標(biāo)準(zhǔn)校翔。
要獲得增強的 Vue 開發(fā)體驗，并利用新的瀏覽器功能灾前，你可以使用最新的 JavaScript 標(biāo)準(zhǔn) ES2015 和 ES2016 或更高版本提供的功能來構(gòu)建 Vue 應(yīng)用程序防症。
不過，如果你選擇使用現(xiàn)代 JavaScript哎甲，就需要提供一種支持舊版瀏覽器的方法蔫敲，否則你的產(chǎn)品可能無法為大多數(shù)用戶提供服務(wù)。
要實現(xiàn)這一目的炭玫，需要使用 Babel奈嘿。它的作用是在應(yīng)用程序發(fā)布之前將你的現(xiàn)代功能“轉(zhuǎn)換”（翻譯和編譯）為標(biāo)準(zhǔn)功能。
WebPack
Webpack 是模塊捆綁器吞加，如果你的代碼跨越了不同模塊（例如不同的 JavaScript 文件）裙犹，Webpack 可以將這些零散的代碼“構(gòu)建”到瀏覽器可讀的單個文件中尽狠。
Webpack 還可以作為構(gòu)建管道，你可以在構(gòu)建代碼之前對代碼進行轉(zhuǎn)換叶圃，例如使用 Babel袄膏、Sass 或 TypeScript，還可以使用一系列插件來優(yōu)化你的應(yīng)用程序掺冠。
很多開發(fā)人員覺得 Webpack 難以掌握沉馆，配置起來也很麻煩，但如果沒有它德崭，將無法使用 Vue 的一些有用的功能（如單文件組件）斥黑。
最近發(fā)布的 Vue CLI 3 提供了一種用于在 Vue 項目中抽象和自動配置 Webpack 的解決方案。
這是否意味著你不需要學(xué)習(xí) Webpack 了接癌？當(dāng)然不是，因為你仍然不可避免地需要進行定制或調(diào)試 Webpack 配置缺猛。
TypeScript
TypeScript 是 JavaScript 語言的超集缨叫，為我們提供了類型（String、Boolean荔燎、Number 等）耻姥，這樣我們就可以編寫健壯的代碼，并盡早發(fā)現(xiàn)錯誤有咨。
Vue.js 3 將于 2019 年推出琐簇，將完全使用 TypeScript 編寫。但這并不意味著你一定要在你的 Vue 項目中使用它座享，但如果你想要為 Vue 貢獻代碼婉商，或者想要理解它的內(nèi)部工作原理，就需要了解 TypeScript渣叛。
4. Vue 的框架
構(gòu)建在 Vue 之上的框架讓你無需從頭開始實現(xiàn)服務(wù)器端渲染丈秩，還可以創(chuàng)建自己的組件庫以及完成很多其他常見任務(wù)。
有很多很好的 Vue 框架淳衙，在這里我們只列出使用最為廣泛和最重要的三個框架蘑秽。
Nuxt.js
如果你想要構(gòu)建一個高性能的 Vue 應(yīng)用程序，就需要基于組件的路由箫攀、服務(wù)器端渲染肠牲、代碼拆分和其他尖端的功能。你還需要像 SEO 標(biāo)簽這樣的功能靴跛。
Nuxt.js 通過各種社區(qū)插件提供了這些開箱即用的功能缀雳，以及更多的功能選項，如 PWA梢睛。
Vuetify
谷歌的 Material Design 是一個使用十分廣泛的指南俏险，用于構(gòu)建漂亮的邏輯用戶界面严拒，并被用在谷歌的產(chǎn)品（如 Android 和 Web）當(dāng)中扬绪。
Vuetify 在一系列 Vue 組件中實現(xiàn)了 Material Design竖独。因此，你可以使用 Material Design 布局和樣式快速構(gòu)建 Vue 應(yīng)用程序挤牛，以及模態(tài)莹痢、警報、導(dǎo)航欄墓赴、分頁等小部件竞膳。
NativeScript-Vue
Vue.js 是一個用于構(gòu)建 Web 用戶界面的庫。如果你想將它用于原生移動界面诫硕，可以使用 NativeScript-Vue 框架坦辟。
NativeScript 是一個用于在 iOS 和 Android 上使用原生用戶界面組件構(gòu)建應(yīng)用程序的系統(tǒng)，而 NativeScript-Vue 是一個基于 NativeScript 的框架章办，提供了 Vue 的語法和組件的使用方式锉走。
5. 雜項
在最后一部分，我們將介紹其他一些內(nèi)容藕届。
插件開發(fā)
如果要在項目中重用 Vue 功能或為 Vue 生態(tài)系統(tǒng)做貢獻挪蹭，可以將功能作為 Vue 插件來開發(fā)。
動畫
如果你需要使用動畫休偶，請了解一下 Vue 的過渡系統(tǒng)，它也是 Vue 核心的一部分踏兜。你可以在向 DOM 添加元素或從 DOM 中刪除元素時應(yīng)用動畫。
你需要創(chuàng)建 CSS 類來定義所需的動畫效果碱妆，無論是淡入淡出、更改顏色還是你喜歡的其他方式山橄。當(dāng)向 DOM 中添加元素或從 DOM 中刪除元素時垮媒，Vue 會檢測到這些變更睡雇，并在過渡期間添加或刪除相應(yīng)的 CSS 類它抱。
漸進式 Web 應(yīng)用程序
漸進式 Web 應(yīng)用程序（PWA）就像普通的 Web 應(yīng)用程序一樣朴艰，只是加入了改進的用戶體驗混移。例如侮穿，PWA 可能包括脫機緩存、服務(wù)器端渲染回铛、推送通知等克锣。
大多數(shù) PWA 功能可以通過 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/
