Vue 2019開發者圖譜

 

做爲 Vue 的初學者，您或許已經聽過不少關於它的專業術語了，例如：單頁面應用程序、異步組件、服務器端呈現等，您可能還聽過和Vue常常一塊兒被提到的工具和庫，如Vuex、Webpack、Vue CLI和Nuxt。

面對這些海量、未知的專業術語和工具，您極可能會感到無助和絕望，不要緊，這是全部新手在初次接觸Vue時都會有的感覺。

Vue龐大的體系和生態，極可能會讓您無所適從。爲了便於您更清晰的理解Vue的體系架構，在這裏我將爲您展現 「2019年Vue開發者知識圖譜」，它包含了全部 Vue 開發過程當中的關鍵部分。您能夠參考這個圖譜，爲您在將來學習Vue的框架指引方向。

 

 

0.   JavaScript和Web開發基礎

若是我讓你去閱讀純英文書籍，那麼你應該先學習英文，對嗎？

一樣，Vue是一個用於構建Web用戶界面的JavaScript框架。在開始使用Vue以前，您至少必須先掌握JavaScript和Web開發的基礎知識。

1.   Vue的基本概念

若是您是一名Vue的萌新開發者，您應該更專一於Vue.js 生態系統的核心，它包括Vue核心庫、Vue Router和Vuex。由於這些工具將會在絕大部分的Vue應用程序中出現。

Vue核心功能

在通常狀況下，Vue將網頁和JavaScript保持同步，實現這一目標的特性是響應式數據指令和插值等模板功能，這些都是第一天須要學習的內容。

在構建你的第一個Vue應用以前，你還必需要去了解如何在網頁中安裝/使用Vue，以及瞭解Vue引用實例的生命週期。

組件

Vue的組件是可重複使用、且相互獨立的UI元素。您首先須要學習，如何聲明組件，及如何經過屬性和事件使組件間達成通訊。同時，學會組合組件也一樣重要，這決定了你可否使用Vue構建出一個健壯、可擴展的Web應用程序。

單頁面應用程序

單頁面應用程序（SPA）架構，決定了你建立的Web頁面可以展現和多頁面網站同樣豐富的內容，且不會發生在用戶點擊連接後從新加載整個頁面這樣低效的行爲。

一旦您將您的「頁面」建立成了一個Vue組件，您能夠爲每個組件使用Vue Router，將每一個請求映射到一個惟一的訪問路徑上，Vue Router是一個由Vue團隊維護的用於構建單頁面應用程序（SPA）的工具。

狀態管理

隨着項目規模愈來愈龐大， SPA的頁面上將會有愈來愈多的組件，管理全局狀態也將變得愈發棘手，組件由於大量的屬性和事件監聽器而變得臃腫。

爲應對上述狀況，你的須要開始瞭解Vue的狀態管理：一種被稱爲「Flux」的特殊模式，可將您的數據保存在穩定的中央存儲中。Flux可經過Vuex庫來實現，該庫由Vue團隊維護。

 

2.   生產環境中的Vue

您從第一部分獲取的知識理論上可用於構建高性能的Vue應用程序。那麼，如何確保他們可以在實際生產環境下運行呢？

若是您要把基於Vue.js 的產品推向用戶，您還須要瞭解更多內容，如下將爲您介紹。

項目腳手架

若是您須要常常構建Vue應用程序，您會發現幾乎每一個項目都會提供配置、設置和開發人員工具。

Vue團隊維護了一個名爲Vue CLI的工具，它可讓您在幾分鐘內構建一個強大的Vue開發環境。

全棧 / 認證應用程序

Vue應用是數據驅動型的用戶界面，數據一般由Node、Laravel、Rails、Django

或其餘服務器框架編寫的安全API做爲來源，大部分數據是由傳統的REST API或GraphQL提供，再或者是Web Socket提供的實時數據。

您應該熟悉這些用於將Vue集成到全堆棧配置中的設計模式，以及在Vue應用程序中保護用戶數據安全的各類注意事項。

若是您正在評估什麼後端產品是您開發Vue應用時的最好選擇，那麼這篇文章中應該有您的答案。(後續會翻譯)

測試

若是您想確保您的Vue應用程序在生產環境中表現的既可維護又穩定，您須要對您的應用提供完整的測試。

在Vue應用程序中，單元測試可確保您的組件始終爲給定的輸入（屬性或用戶輸入的內容）提供相同的輸出（渲染好的HTML或事件）。

Vue團隊維護着一個名爲Vue Test Utils的工具，它容許您對組件單首創建和執行測試過程。

 

優化手段

當您將應用程序部署到遠程服務器後，這個應用的訪問速度和執行效率極可能不會像在開發階段表現的那樣迅速，極可能當用戶訪問時速度會變得很慢。

爲了提高效率，咱們須要優化Vue應用，優化過程能夠採用多種技術，如服務端渲染。在服務端渲染中，Vue程序將在服務端執行，在用戶訪問時，將渲染完成的HTML呈現給用戶，從而達到提高訪問速度的目的。

固然，優化手段不侷限於這一種，還包括：異步組件和渲染功能。

 

3.   關鍵工具

到目前爲止，咱們所掌握的知識皆來自於Vue.js核心和生態系統中的工具。但Vue並非孤立存在的，它只是前端技術棧的一部分。

在高級開發領域不該該僅僅熟悉Vue，還要熟悉一些其餘關鍵工具，由於它可能將成爲將來Vue應用的重要組成部分。

現代JavaScript和Babel

ES5能夠有效構建的Vue應用程序，也幾乎是全部瀏覽器都支持的JavaScript標準。

爲了加強Vue的開發體驗，使用最新的瀏覽器功能，您能夠藉助最新的JavaScript

標準（ES2015的特性或ES2016及更高版本的全新功能）來構建您的Vue應用程序。

注意：若是您選擇使用了最新的JavaScript，那麼舊版瀏覽器將會出現兼容問題，這極可能會形成您的產品損失掉一部分用戶。

如何對舊瀏覽器作兼容呢？ Babel 能夠實現這個目的，它的職責就是在應用程序發佈前將您應用程序中現代的特性「轉換」（翻譯和編譯）爲標準功能。

Webpack

Webpack是一個模塊打包工具，意思是若是您的代碼是由跨不一樣模塊編寫的（例如，不一樣的JavaScript文件），Webpack也能夠將這些內容「打包」到同一瀏覽器可讀的單個文件中。

Webpack 還能夠構建流水線，它容許您在構建代碼前進行轉換。例如，使用前面提到的Babel、Sass或TypeScript，還可使用一系列插件來優化您的Web應用程序。

許多開發者認爲Webpack很難理解，也很難配置，但若是沒有它，Vue的一些特性功能（如：單頁面組件）將沒法實現。咱們有關於WebPack的系列教程，助您快速掌握Webpack的使用和配置。

TypeScript

TypeScript是JavaScript語言的超集，它包含了（String、Boolean、Number等）。有了這樣的定義，能保證您在開發期間就能編寫出健壯且穩定的代碼，並儘早發現錯誤。

即將於2019年推出的Vue.js 3將徹底用TypeScript編寫，這並不意味着您必須在Vue項目中使用它。但假如您須要經過閱讀Vue的內部代碼並加入Vue的開源組織爲其貢獻力量，您至少也應提早了解TypeScript。

 

4.  Vue框架

基於Vue建立的框架，使您無需從頭開始實現服務端渲染，就可建立本身的組件庫以及其餘相似的工做。

目前有許多優秀的Vue框架，這裏，咱們只列出了應用在不一樣領域最爲普遍的三個框架。

Nuxt.js

若是你想要構建一個高性能的Vue應用程序，基於路由、服務端呈現、代碼分離和其餘前沿特性，同時還須要一些更高級的功能，例如：SEO標記等。您可使用Nuxt.js框架。

Nuxt.js框架經過其豐富的社區插件提供了全部這些開箱即用的特性，甚至更多，如PWA等。

Vuetify

Google的Material Design標準是一個普遍使用的設計語言指南系統，它用於構建漂亮併合理的用戶界面，這些界面被普遍應用於Google的產品，如Android和Web系統。

Vuetify框架在一系列Vue組件中實現了Material Design。這容許您使用Material Design佈局和樣式快速建立Vue應用程序，並在應用程序中實現模態框、提示框、導航欄、分頁等頁面小控件。

NativeScript-Vue

Vue.js 是一個用於構建Web用戶界面的UI庫。若是您想將他用於構建移動應用，可使用NativeScript-Vue框架。

NativeScript是一個使用iOS和Android原生用戶界面組件構建應用app的框架，而NativeScript-Vues 是基於NativeScript且支持Vue語法和Vue組件使用的框架。

5.  支持Vue的控件/組件

若是您想在項目中快速構建基於Vue的功能模塊，如相似Excel功能和佈局的電子表格、前端導入導出Excel、在Web應用程序中嵌入在線Excel、數據分析OLAP、金融圖表等，您可使用一些成熟的商業化開發工具，純前端表格控件SpreadJS和前端開發工具包WijmoJS。

純前端表格控件SpreadJS

 

 

SpreadJS 是一款基於 HTML5 的純 JavaScript 電子表格和網格功能控件，以「高速低耗、純前端、零依賴」爲產品特點，可嵌入任何操做系統，知足 .NET、Java、響應式 Web 應用及移動跨平臺的表格數據處理和類 Excel 的表格應用開發，實如今線 Excel 體驗。

SpreadJS 在數據展現、前端導入導出、圖表面板、數據綁定等場景無需大量代碼開發和測試，可極大節省企業研發成本並下降交付風險。

前端開發工具包WijmoJS

 

 

WijmoJS 前端開發工具包由多款靈活高效、零依賴、輕量級的純前端控件組成，如表格控件 FlexGrid、圖表控件 FlexChart、數據分析 OLAP 等，完美支持原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可用於企業快速構建桌面、移動 Web 應用程序。

WijmoJS 憑藉其先進的體系架構、簡單易學的使用文檔、超過 500 種 Demo 演示、頂級的控件性能，以及輕鬆、易用的操做體驗，可全面知足企業前端開發所需，是構建企業級 Web 應用程序最高效的純前端開發工具包。

6.  其餘項目

在最後一部分中，咱們將介紹一些重要但不包含在上述分類中的內容。

插件開發

若是您要在項目中重用Vue功能，或爲Vue生態作出貢獻，您能夠把這部分功能打包成插件併發布給其餘用戶。

插件功能是Vue的一個重要特性，有不少工具和模板均可以幫助您建立輕便高效的Vue代碼。

動畫

動畫也是 Vue核心功能的一部分，它容許您向DOM中添加或刪除元素時應用動畫。 爲了啓用一個動畫，您能夠建立CSS類來定義所需的動畫效果，不管是淡入淡出、更改顏色仍是任何其餘效果。Vue將在添加或刪除元素時，同時添加或刪除您設置相應的類。

漸進式Web應用程序（PWA）

漸進式Web應用程序（PWA）與普通的Web應用程序相似，但用戶體驗、性能已經獲得了加強，同時還增長了部分現代功能，如，離線緩存、服務端渲染、通知推送等。

大部分PWA功能能夠經過Vue CLI 3插件或注入Nuxt.js之類的框架添加到Vue應用中，但您仍需學習其中的關鍵技術，包括Web應用json清單（minifest）和服務等。

擴展控件

在您的Web應用中，若有電子表格、報表、數據分析、金融圖表、在線表格編輯等需求，可使用上文提到的支持Vue框架的控件和組件包，除了無需考慮兼容性問題外，這些控件可以使您的Web應用爲用戶帶來更穩定、更高效的使用體驗。