概述

如果您是Vue開(kāi)發(fā)的新手，您可能已經(jīng)聽(tīng)過(guò)很多關(guān)于它的專業(yè)術(shù)語(yǔ)了，例如：?jiǎn)雾?yè)面應(yīng)用程序、異步組件、服務(wù)器端呈現(xiàn)等。

另外您可能還經(jīng)常聽(tīng)到和Vue一起提到的工具和庫(kù)，如Vuex、Webpack、Vue CLI和Nuxt。

也許您在面對(duì)這些未知的術(shù)語(yǔ)和工具時(shí)會(huì)感到無(wú)助和絕望，沒(méi)關(guān)系，您并不孤單，因?yàn)檫@是所有新手在初次接觸Vue時(shí)都會(huì)有的感受。

但如果您試圖要一次掌握所有這些內(nèi)容，那么這些龐大的體系很可能會(huì)壓垮你。為此，我在這里將為大家展示一個(gè)“知識(shí)圖表”，它包含了所有在專業(yè)Vue開(kāi)發(fā)過(guò)程中的關(guān)鍵部分。您可以參考這個(gè)圖為您在2019學(xué)習(xí)Vue的過(guò)程中指引方向。

0. JavaScript和Web開(kāi)發(fā)基礎(chǔ)

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

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

1. Vue的基礎(chǔ)概念

如果您是一個(gè)Vue的萌新開(kāi)發(fā)，您應(yīng)該專注于Vue.js 生態(tài)系統(tǒng)的核心，其中包括Vue核心庫(kù)，Vue Router和Vuex。因?yàn)檫@些工具將會(huì)在絕大部分的Vue應(yīng)用程序中應(yīng)用。好的，那我們開(kāi)始介紹關(guān)于Vue的一些基礎(chǔ)概念。

Vue核心功能

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

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

組件

Vue的組件是可重復(fù)使用，并相互獨(dú)立的UI元素。您需要了解，如何聲明組件，以及如何通過(guò)屬性和事件使組件間通信。

并且學(xué)會(huì)組合組件也同樣重要，因?yàn)檫@關(guān)乎著你是否能夠使用Vue構(gòu)建出一個(gè)健壯、可擴(kuò)展應(yīng)用程序。

單頁(yè)面應(yīng)用程序

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

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

狀態(tài)管理

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

一種稱為“Flux”的特殊模式可將您的數(shù)據(jù)保存在穩(wěn)定的中央存儲(chǔ)中。Vuex庫(kù)也由Vue團(tuán)隊(duì)維護(hù)，可祝您在Vue.js 應(yīng)用程序中實(shí)現(xiàn)Flux。

2. 生產(chǎn)環(huán)境中的Vue

您從第一部分獲得的所有知識(shí)都可用于構(gòu)建高性能和高效的Vue應(yīng)用程序，雖然是允許在你的本地服務(wù)器上，那么，如何確保他們能夠在實(shí)際生產(chǎn)環(huán)境下運(yùn)行呢？

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

項(xiàng)目腳手架

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

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

全棧 / 認(rèn)證應(yīng)用程序

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

或其他服務(wù)器框架編寫(xiě)的安全API作為來(lái)源。

也許數(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)。

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

測(cè)試

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

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

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

優(yōu)化

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

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

當(dāng)然，還包括其他優(yōu)化技術(shù)，例如：異步組件和渲染功能。

3. 關(guān)鍵工具

到目前為止，我們所看到的一切都來(lái)自Vue.js核心，或來(lái)自生態(tài)系統(tǒng)中的工具。但Vue不是孤立存在的，它只是前端技術(shù)棧中其中的一塊。

高級(jí)開(kāi)發(fā)中不應(yīng)該僅僅熟悉Vue，還要熟悉一些其他關(guān)鍵工具，因?yàn)樗赡軐⒊蔀槲磥?lái)Vue應(yīng)用其中的一部分。

現(xiàn)代JavaScript和Babel

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

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

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

如果選擇使用了最新的JavaScript特性，那么其中舊版瀏覽器將會(huì)出現(xiàn)兼容問(wèn)題，這會(huì)造成您的產(chǎn)品將會(huì)損失掉一部分用戶。

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

Webpack

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

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

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

TypeScript

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

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

4. Vue框架

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

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

Nuxt.js

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

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

Vuetify

Google的Material Design標(biāo)準(zhǔn)是一個(gè)廣泛使用的設(shè)計(jì)語(yǔ)言指南系統(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)航欄、分頁(yè)等頁(yè)面小控件。

NativeScript-Vue

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

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

5. 其他

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

插件開(kāi)發(fā)

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

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

動(dòng)畫(huà)

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

漸進(jìn)式Web應(yīng)用程序

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

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

以上就是Vue開(kāi)發(fā)指南之重點(diǎn)知識(shí)梳理的詳細(xì)內(nèi)容，更多關(guān)于Vue的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！