摘要：為了便于您更清晰的理解的體系架構(gòu)，在這里我將為您展示年開發(fā)者知識圖譜，它包含了所有開發(fā)過程中的關(guān)鍵部分。在數(shù)據(jù)展示前端導(dǎo)入導(dǎo)出圖表面板數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。

作為 Vue 的初學(xué)者，您或許已經(jīng)聽過很多關(guān)于它的專業(yè)術(shù)語了，例如：單頁面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等，您可能還聽過和Vue經(jīng)常一起被提到的工具和庫，如Vuex、Webpack、Vue CLI和Nuxt。

面對這些海量、未知的專業(yè)術(shù)語和工具，您很可能會感到無助和絕望，沒關(guān)系，這是所有新手在初次接觸Vue時(shí)都會有的感受。

Vue龐大的體系和生態(tài)，很可能會讓您無所適從。為了便于您更清晰的理解Vue的體系架構(gòu)，在這里我將為您展示 “2019年Vue開發(fā)者知識圖譜”，它包含了所有 Vue 開發(fā)過程中的關(guān)鍵部分。您可以參考這個(gè)圖譜，為您在未來學(xué)習(xí)Vue的框架指引方向。

如果我讓你去閱讀純英文書籍，那么你應(yīng)該先學(xué)習(xí)英文，對嗎？

同樣，Vue是一個(gè)用于構(gòu)建Web用戶界面的JavaScript框架。在開始使用Vue之前，您至少必須先掌握J(rèn)avaScript和Web開發(fā)的基礎(chǔ)知識。

如果您是一名Vue的萌新開發(fā)者，您應(yīng)該更專注于Vue.js 生態(tài)系統(tǒng)的核心，它包括Vue核心庫、Vue Router和Vuex。因?yàn)檫@些工具將會在絕大部分的Vue應(yīng)用程序中出現(xiàn)。

在一般情況下，Vue將網(wǎng)頁和JavaScript保持同步，實(shí)現(xiàn)這一目標(biāo)的特性是響應(yīng)式數(shù)據(jù)指令和插值等模板功能，這些都是第一天需要學(xué)習(xí)的內(nèi)容。

在構(gòu)建你的第一個(gè)Vue應(yīng)用之前，你還必須要去了解如何在網(wǎng)頁中安裝/使用Vue，以及了解Vue引用實(shí)例的生命周期。

Vue的組件是可重復(fù)使用、且相互獨(dú)立的UI元素。您首先需要學(xué)習(xí)，如何聲明組件，及如何通過屬性和事件使組件間達(dá)成通信。同時(shí)，學(xué)會組合組件也同樣重要，這決定了你能否使用Vue構(gòu)建出一個(gè)健壯、可擴(kuò)展的Web應(yīng)用程序。

單頁面應(yīng)用程序（SPA）架構(gòu)，決定了你創(chuàng)建的Web頁面能夠展示和多頁面網(wǎng)站一樣豐富的內(nèi)容，且不會發(fā)生在用戶點(diǎn)擊鏈接后重新加載整個(gè)頁面這樣低效的行為。

一旦您將您的“頁面”創(chuàng)建成了一個(gè)Vue組件，您可以為每一個(gè)組件使用Vue Router，將每個(gè)請求映射到一個(gè)唯一的訪問路徑上，Vue Router是一個(gè)由Vue團(tuán)隊(duì)維護(hù)的用于構(gòu)建單頁面應(yīng)用程序（SPA）的工具。

隨著項(xiàng)目規(guī)模越來越龐大， SPA的頁面上將會有越來越多的組件，管理全局狀態(tài)也將變得愈發(fā)棘手，組件因?yàn)榇罅康膶傩院褪录O(jiān)聽器而變得臃腫。

為應(yīng)對上述情況，你的需要開始了解Vue的狀態(tài)管理：一種被稱為“Flux”的特殊模式，可將您的數(shù)據(jù)保存在穩(wěn)定的中央存儲中。Flux可通過Vuex庫來實(shí)現(xiàn)，該庫由Vue團(tuán)隊(duì)維護(hù)。

您從第一部分獲取的知識理論上可用于構(gòu)建高性能的Vue應(yīng)用程序。那么，如何確保他們能夠在實(shí)際生產(chǎn)環(huán)境下運(yùn)行呢？

如果您要把基于Vue.js 的產(chǎn)品推向用戶，您還需要了解更多內(nèi)容，以下將為您介紹。

如果您需要經(jīng)常構(gòu)建Vue應(yīng)用程序，您會發(fā)現(xiàn)幾乎每個(gè)項(xiàng)目都會提供配置、設(shè)置和開發(fā)人員工具。

Vue團(tuán)隊(duì)維護(hù)了一個(gè)名為Vue CLI的工具，它可以讓您在幾分鐘內(nèi)構(gòu)建一個(gè)強(qiáng)大的Vue開發(fā)環(huán)境。

Vue應(yīng)用是數(shù)據(jù)驅(qū)動型的用戶界面，數(shù)據(jù)通常由Node、Laravel、Rails、Django

或其他服務(wù)器框架編寫的安全API作為來源，大部分?jǐn)?shù)據(jù)是由傳統(tǒng)的REST API或GraphQL提供，再或者是Web Socket提供的實(shí)時(shí)數(shù)據(jù)。

您應(yīng)該熟悉這些用于將Vue集成到全堆棧配置中的設(shè)計(jì)模式，以及在Vue應(yīng)用程序中保護(hù)用戶數(shù)據(jù)安全的各種注意事項(xiàng)。

如果您正在評估什么后端產(chǎn)品是您開發(fā)Vue應(yīng)用時(shí)的最好選擇，那么這篇文章中應(yīng)該有您的答案。(后續(xù)會翻譯)

如果您想確保您的Vue應(yīng)用程序在生產(chǎn)環(huán)境中表現(xiàn)的既可維護(hù)又穩(wěn)定，您需要對您的應(yīng)用提供完整的測試。

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

Vue團(tuán)隊(duì)維護(hù)著一個(gè)名為Vue Test Utils的工具，它允許您對組件多帶帶創(chuàng)建和執(zhí)行測試過程。

當(dāng)您將應(yīng)用程序部署到遠(yuǎn)程服務(wù)器后，這個(gè)應(yīng)用的訪問速度和執(zhí)行效率很可能不會像在開發(fā)階段表現(xiàn)的那樣迅速，很可能當(dāng)用戶訪問時(shí)速度會變得很慢。

為了提升效率，我們需要優(yōu)化Vue應(yīng)用，優(yōu)化過程可以采用多種技術(shù)，如服務(wù)端渲染。在服務(wù)端渲染中，Vue程序?qū)⒃诜?wù)端執(zhí)行，在用戶訪問時(shí)，將渲染完成的HTML呈現(xiàn)給用戶，從而達(dá)到提升訪問速度的目的。

當(dāng)然，優(yōu)化手段不局限于這一種，還包括：異步組件和渲染功能。

到目前為止，我們所掌握的知識皆來自于Vue.js核心和生態(tài)系統(tǒng)中的工具。但Vue并不是孤立存在的，它只是前端技術(shù)棧的一部分。

在高級開發(fā)領(lǐng)域不應(yīng)該僅僅熟悉Vue，還要熟悉一些其他關(guān)鍵工具，因?yàn)樗赡軐⒊蔀槲磥鞻ue應(yīng)用的重要組成部分。

ES5可以有效構(gòu)建的Vue應(yīng)用程序，也幾乎是所有瀏覽器都支持的JavaScript標(biāo)準(zhǔn)。

為了增強(qiáng)Vue的開發(fā)體驗(yàn)，使用最新的瀏覽器功能，您可以借助最新的JavaScript

標(biāo)準(zhǔn)（ES2015的特性或ES2016及更高版本的全新功能）來構(gòu)建您的Vue應(yīng)用程序。

注意：如果您選擇使用了最新的JavaScript，那么舊版瀏覽器將會出現(xiàn)兼容問題，這很可能會造成您的產(chǎn)品損失掉一部分用戶。

如何對舊瀏覽器做兼容呢？ Babel 可以實(shí)現(xiàn)這個(gè)目的，它的職責(zé)就是在應(yīng)用程序發(fā)布前將您應(yīng)用程序中現(xiàn)代的特性“轉(zhuǎn)換”（翻譯和編譯）為標(biāo)準(zhǔn)功能。

Webpack是一個(gè)模塊打包工具，意思是如果您的代碼是由跨不同模塊編寫的（例如，不同的JavaScript文件），Webpack也可以將這些內(nèi)容“打包”到同一瀏覽器可讀的單個(gè)文件中。

Webpack 還可以構(gòu)建流水線，它允許您在構(gòu)建代碼前進(jìn)行轉(zhuǎn)換。例如，使用前面提到的Babel、Sass或TypeScript，還可以使用一系列插件來優(yōu)化您的Web應(yīng)用程序。

許多開發(fā)者認(rèn)為Webpack很難理解，也很難配置，但如果沒有它，Vue的一些特性功能（如：單頁面組件）將無法實(shí)現(xiàn)。我們有關(guān)于WebPack的系列教程，助您快速掌握Webpack的使用和配置。

TypeScript是JavaScript語言的超集，它包含了（String、Boolean、Number等）。有了這樣的定義，能保證您在開發(fā)期間就能編寫出健壯且穩(wěn)定的代碼，并盡早發(fā)現(xiàn)錯(cuò)誤。

即將于2019年推出的Vue.js 3將完全用TypeScript編寫，這并不意味著您必須在Vue項(xiàng)目中使用它。但假如您需要通過閱讀Vue的內(nèi)部代碼并加入Vue的開源組織為其貢獻(xiàn)力量，您至少也應(yīng)提前了解TypeScript。

基于Vue創(chuàng)建的框架，使您無需從頭開始實(shí)現(xiàn)服務(wù)端渲染，就可創(chuàng)建自己的組件庫以及其他類似的工作。

目前有許多優(yōu)秀的Vue框架，這里，我們只列出了應(yīng)用在不同領(lǐng)域最為廣泛的三個(gè)框架。

如果你想要構(gòu)建一個(gè)高性能的Vue應(yīng)用程序，基于路由、服務(wù)端呈現(xiàn)、代碼分離和其他前沿特性，同時(shí)還需要一些更高級的功能，例如：SEO標(biāo)記等。您可以使用Nuxt.js框架。

Nuxt.js框架通過其豐富的社區(qū)插件提供了所有這些開箱即用的特性，甚至更多，如PWA等。

Google的Material Design標(biāo)準(zhǔn)是一個(gè)廣泛使用的設(shè)計(jì)語言指南系統(tǒng)，它用于構(gòu)建漂亮并合理的用戶界面，這些界面被廣泛應(yīng)用于Google的產(chǎn)品，如Android和Web系統(tǒng)。

Vuetify框架在一系列Vue組件中實(shí)現(xiàn)了Material Design。這允許您使用Material Design布局和樣式快速創(chuàng)建Vue應(yīng)用程序，并在應(yīng)用程序中實(shí)現(xiàn)模態(tài)框、提示框、導(dǎo)航欄、分頁等頁面小控件。

Vue.js 是一個(gè)用于構(gòu)建Web用戶界面的UI庫。如果您想將他用于構(gòu)建移動應(yīng)用，可以使用NativeScript-Vue框架。

NativeScript是一個(gè)使用iOS和Android原生用戶界面組件構(gòu)建應(yīng)用app的框架，而NativeScript-Vues 是基于NativeScript且支持Vue語法和Vue組件使用的框架。

如果您想在項(xiàng)目中快速構(gòu)建基于Vue的功能模塊，如類似Excel功能和布局的電子表格、前端導(dǎo)入導(dǎo)出Excel、在Web應(yīng)用程序中嵌入在線Excel、數(shù)據(jù)分析OLAP、金融圖表等，您可以使用一些成熟的商業(yè)化開發(fā)工具，純前端表格控件SpreadJS和前端開發(fā)工具包WijmoJS。

SpreadJS 是一款基于 HTML5 的純 JavaScript 電子表格和網(wǎng)格功能控件，以“高速低耗、純前端、零依賴”為產(chǎn)品特色，可嵌入任何操作系統(tǒng)，滿足 .NET、Java、響應(yīng)式 Web 應(yīng)用及移動跨平臺的表格數(shù)據(jù)處理和類 Excel 的表格應(yīng)用開發(fā)，實(shí)現(xiàn)在線 Excel 體驗(yàn)。

SpreadJS 在數(shù)據(jù)展示、前端導(dǎo)入導(dǎo)出、圖表面板、數(shù)據(jù)綁定等場景無需大量代碼開發(fā)和測試，可極大節(jié)省企業(yè)研發(fā)成本并降低交付風(fēng)險(xiǎn)。

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

WijmoJS 憑借其先進(jìn)的體系架構(gòu)、簡單易學(xué)的使用文檔、超過 500 種 Demo 演示、頂級的控件性能，以及輕松、易用的操作體驗(yàn)，可全面滿足企業(yè)前端開發(fā)所需，是構(gòu)建企業(yè)級 Web 應(yīng)用程序最高效的純前端開發(fā)工具包。

在最后一部分中，我們將介紹一些重要但不包含在上述分類中的內(nèi)容。

如果您要在項(xiàng)目中重用Vue功能，或?yàn)閂ue生態(tài)做出貢獻(xiàn)，您可以把這部分功能打包成插件并發(fā)布給其他用戶。

插件功能是Vue的一個(gè)重要特性，有很多工具和模板都可以幫助您創(chuàng)建輕便高效的Vue代碼。

動畫也是 Vue核心功能的一部分，它允許您向DOM中添加或刪除元素時(shí)應(yīng)用動畫。 為了啟用一個(gè)動畫，您可以創(chuàng)建CSS類來定義所需的動畫效果，無論是淡入淡出、更改顏色還是任何其他效果。Vue將在添加或刪除元素時(shí)，同時(shí)添加或刪除您設(shè)置相應(yīng)的類。

漸進(jìn)式Web應(yīng)用程序（PWA）與普通的Web應(yīng)用程序類似，但用戶體驗(yàn)、性能已經(jīng)得到了增強(qiáng)，同時(shí)還增加了部分現(xiàn)代功能，如，離線緩存、服務(wù)端渲染、通知推送等。

大部分PWA功能可以通過Vue CLI 3插件或注入Nuxt.js之類的框架添加到Vue應(yīng)用中，但您仍需學(xué)習(xí)其中的關(guān)鍵技術(shù)，包括Web應(yīng)用json清單（minifest）和服務(wù)等。

在您的Web應(yīng)用中，如有電子表格、報(bào)表、數(shù)據(jù)分析、金融圖表、在線表格編輯等需求，可以使用上文提到的支持Vue框架的控件和組件包，除了無需考慮兼容性問題外，這些控件可使您的Web應(yīng)用為用戶帶來更穩(wěn)定、更高效的使用體驗(yàn)。