2019年的Vue發展

 

若是你是 Vue 開發新手，可能已經聽過不少行話術語，好比單頁面應用程序、異步組件、服務器端渲染，等等。你可能還據說過與 Vue 有關的一些工具和庫，好比 Vuex、Webpack、Vue CLI 和 Nuxt。

浸沒在術語和工具的浩瀚海洋中不免會使人感到沮喪，但其實並非只有你一我的有這種感覺，全部經驗水平的開發人員都會持續感受到這種莫名的壓力。

一口氣吃不成胖子，試圖一會兒學習全部東西多是徒勞的，因此我將在這篇文章中展現一個高級「知識地圖」，它包含了與 Vue 開發相關的關鍵領域，你可使用這張地圖做爲 2019 年學習 Vue 的圖鑑。

 

0. JavaScript 和基本的 Web 開發

若是我要你學習中文書籍中所寫的內容，你首先要學會中文，對吧？

一樣，Vue 是一個用於構建 Web 用戶界面的 JavaScript 框架。在開始使用 Vue 以前，你必須瞭解 JavaScript 和 Web 開發的基礎知識。

1. Vue 基本概念

若是你是 Vue 開發新手，應該專一於 Vue.js 生態系統的核心，包括 Vue 核心庫、Vue Router 和 Vuex。

這些工具將被用在大多數 Vue 應用程序中，併爲本文中提到的其餘領域提供了一個構建框架。

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。

2. 現實世界中的 Vue

以上的知識可用於構建高性能的 Vue 應用程序，但如何將它們部署到生產環境中？

若是你想將基於 Vue.js 的產品發送給真實用戶，你還須要瞭解更多東西！

項目腳手架

若是你常常構建 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 頁面並傳給用戶。

其餘優化手段還包括使用異步組件和渲染函數。

3. 關鍵的相關工具

到目前爲止，咱們所看到的一切都來自 Vue.js 核心，或來自生態系統中的工具。但 Vue 不是孤立存在的，它只是前端技術棧中的一層。

高級 Vue 開發人員不只須要熟悉 Vue，還須要熟悉每一個 Vue 項目的關鍵工具。

現代 JavaScript 和 Babel

Vue 應用程序可使用 ES5 開發，ES5 是幾乎全部瀏覽器都支持的 JavaScript 標準。

要得到加強的 Vue 開發體驗，並利用新的瀏覽器功能，你可使用最新的 JavaScript 標準 ES2015 和 ES2016 或更高版本提供的功能來構建 Vue 應用程序。

不過，若是你選擇使用現代 JavaScript，就須要提供一種支持舊版瀏覽器的方法，不然你的產品可能沒法爲大多數用戶提供服務。

要實現這一目的，須要使用 Babel。它的做用是在應用程序發佈以前將你的現代功能「轉換」（翻譯和編譯）爲標準功能。

WebPack

Webpack 是模塊捆綁器，若是你的代碼跨越了不一樣模塊（例如不一樣的 JavaScript 文件），Webpack 能夠將這些零散的代碼「構建」到瀏覽器可讀的單個文件中。

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

不少開發人員以爲 Webpack 難以掌握，配置起來也很麻煩，但若是沒有它，將沒法使用 Vue 的一些有用的功能（如單文件組件）。

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

這是否意味着你不須要學習 Webpack 了？固然不是，由於你仍然不可避免地須要進行定製或調試 Webpack 配置。

TypeScript

TypeScript 是 JavaScript 語言的超集，爲咱們提供了類型（String、Boolean、Number 等），這樣咱們就能夠編寫健壯的代碼，並儘早發現錯誤。

Vue.js 3 將於 2019 年推出，將徹底使用 TypeScript 編寫。但這並不意味着你必定要在你的 Vue 項目中使用它，但若是你想要爲 Vue 貢獻代碼，或者想要理解它的內部工做原理，就須要瞭解 TypeScript。

4. Vue 的框架

構建在 Vue 之上的框架讓你無需從頭開始實現服務器端渲染，還能夠建立本身的組件庫以及完成不少其餘常見任務。

有不少很好的 Vue 框架，在這裏咱們只列出使用最爲普遍和最重要的三個框架。

Nuxt.js

若是你想要構建一個高性能的 Vue 應用程序，就須要基於組件的路由、服務器端渲染、代碼拆分和其餘尖端的功能。你還須要像 SEO 標籤這樣的功能。

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

Vuetify

谷歌的 Material Design 是一個使用十分普遍的指南，用於構建漂亮的邏輯用戶界面，並被用在谷歌的產品（如 Android 和 Web）當中。

Vuetify 在一系列 Vue 組件中實現了 Material Design。所以，你可使用 Material Design 佈局和樣式快速構建 Vue 應用程序，以及模態、警報、導航欄、分頁等小部件。

NativeScript-Vue

Vue.js 是一個用於構建 Web 用戶界面的庫。若是你想將它用於原生移動界面，可使用 NativeScript-Vue 框架。

NativeScript 是一個用於在 iOS 和 Android 上使用原生用戶界面組件構建應用程序的系統，而 NativeScript-Vue 是一個基於 NativeScript 的框架，提供了 Vue 的語法和組件的使用方式。

5. 雜項

在最後一部分，咱們將介紹其餘一些內容。

插件開發

若是要在項目中重用 Vue 功能或爲 Vue 生態系統作貢獻，能夠將功能做爲 Vue 插件來開發。

動畫

若是你須要使用動畫，請了解一下 Vue 的過渡系統，它也是 Vue 核心的一部分。你能夠在向 DOM 添加元素或從 DOM 中刪除元素時應用動畫。

你須要建立 CSS 類來定義所需的動畫效果，不管是淡入淡出、更改顏色仍是你喜歡的其餘方式。當向 DOM 中添加元素或從 DOM 中刪除元素時，Vue 會檢測到這些變動，並在過渡期間添加或刪除相應的 CSS 類。

漸進式 Web 應用程序

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

大多數 PWA 功能能夠經過 Vue CLI 3 插件或使用 Nuxt.js 等框架添加到 Vue 應用程序中，但你仍然須要瞭解一些關鍵技術，包括 Web App Manifest 和 ServiceWorker。

 

(原文翻譯)

英文原文：https://vuejsdevelopers.com/2018/12/04/vue-js-2019-knowledge-map/