轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://dzone.com/articles/vue-development-in-2019-what-you-need-to-know

如果您是Vue開發的新手，您可能已經聽過很多關於它的專業術語了，例如：單頁面應用程式、非同步元件、伺服器端呈現等。

另外您可能還經常聽到和Vue一起提到的工具和庫，如Vuex、Webpack、Vue CLI和Nuxt。

也許您在面對這些未知的術語和工具時會感到無助和絕望，沒關係，您並不孤單，因為這是所有新手在初次接觸Vue時都會有的感受。

但如果您試圖要一次掌握所有這些內容，那麼這些龐大的體系很可能會壓垮你。為此，我在這裡將為大家展示一個“知識圖表”，它包含了所有在專業Vue開發過程中的關鍵部分。您可以參考這個圖為您在2019學習Vue的過程中指引方向。

0. JavaScript和Web開發基礎

如果我讓你用英文去閱讀純英文書籍，那麼你應該先要學習英文，對嗎？

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

1. Vue的基礎概念

如果您是一個Vue的萌新開發，您應該專注於Vue.js 生態系統的核心，其中包括Vue核心庫，Vue Router和Vuex。因為這些工具將會在絕大部分的Vue應用程式中應用。好的，那我們開始介紹關於Vue的一些基礎概念。

Vue核心功能

在基礎情況下，Vue將網頁和JavaScript保持同步，實現這一目標的特性是響應式資料及指令和插值等模板功能，這些都是第一天要學習的內容。

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

元件

Vue的元件是可重複使用，並相互獨立的UI元素。您需要了解，如何宣告元件，以及如何通過屬性和事件使元件間通訊。

並且學會組合元件也同樣重要，因為這關乎著你是否能夠使用Vue構建出一個健壯、可擴充套件應用程式。

單頁面應用程式

單頁面應用程式（SPA）架構決定了您建立的Web頁面一樣能夠展示和多頁面網站一樣豐富的內容，且不會當使用者在點選連結後重新載入整個頁面等這樣低效的行為。

一旦您將您的“頁面”建立成了一個Vue元件，您可以為每一個元件使用Vue Router，將每個請求對映到一個唯一的訪問路徑上，Vue Router是一個由Vue團隊維護的用於構建單頁面應用程式（SPA）的工具。

狀態管理

隨著專案規模越來越龐大， SPA的許多頁面上將會有越來越多的元件，管理全域性狀態也將變得越發棘手，元件因為大量的屬性和事件監聽器而變得臃腫。

一種稱為“Flux”的特殊模式可將您的資料儲存在穩定的中央儲存中。Vuex庫也由Vue團隊維護，可祝您在Vue.js 應用程式中實現Flux。

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應用程式，ES5幾乎是所有瀏覽器都支援的JavaScript標準。

為了增強Vue的開發體驗，並使用最新的瀏覽器功能，您可以使用最新的JavaScript

標準ES2015的特性或ES2016及更高版本的建議功能來構建您的Vue應用程式。

如果選擇使用了最新的JavaScript特性，那麼其中舊版瀏覽器將會出現相容問題，這會造成您的產品將會損失掉一部分使用者。

而如何對舊瀏覽器做相容呢？ Babel 可以實現這個目的，它的職責就是在應用程式釋出前將您應用程式中現代特性“轉換”（翻譯和編譯）為標準功能。

Webpack

Webpack是一個模組打包工具，意思是如果您的程式碼跨不同模組編寫的（例如，不同的JavaScript檔案），Webpack也可以全部將這些內容“構建”到一個瀏覽器可讀的單個檔案中。

Webpack 還可以構建流水線，它允許您在構建程式碼前進行轉換。例如，使用前面鐵道的Babel，Sass或TypeScript，還可以使用一系列外掛來優化您的應用程式。

許多開發者認為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使用者介面的庫。如果您想將他用於構建移動應用，您可以使用NativeScript-Vue框架。

NativeScript是一個使用iOS和Android上原生使用者介面元件構建應用app的框架，而NativeScript-Vues 是基於NativeScript且支援Vue語法和Vue元件使用的框架。

5. 其他

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

外掛開發

如果您要在專案中重用Vue功能，或為Vue生態做出貢獻，您可以把這部分功能打包成外掛併發布給其他使用者。

外掛功能是Vue的一個重要特性，有很多工具和模板可以幫助您建立輕便高效的Vue程式碼。

動畫

動畫也是 Vue核心功能的一部分，它允許您在向DOM中新增或刪除元素時應用動畫。 為了啟用一個動畫，您可以建立CSS類來定義所需的動畫效果，無論是淡入淡出、更改顏色還是任何其他效果。Vue將檢測當新增元素和刪除元素時，新增或刪除您設定相應的類。

漸進式Web應用程式

漸進式Web應用程式（PWA）與普通的Web應用程式類似，但使用者體驗、效能已經得到了增強，同時還增加了現代功能，例如，PWA包括離線快取、服務端渲染、通知推送等。

大部分PWA功能可以通過Vue CLI 3外掛或主入Nuxt.js之類的框架輕鬆新增到Vue應用中，但您最好仍然需要去學習其中的關鍵技術，包括Web應用json清單（minifest）和服務等技術。

擴充套件控制元件

您的應用中如包含有電子表格、報表、資料分析、金融圖表、線上表格編輯器等需求。可以嘗試使用葡萄城的SpreadJS純前端表格控制元件、WijmoJS純前端開發工具包，這兩款控制元件工具都完美相容Vue，可使您的應用為使用者帶來更穩定、更高效的使用體驗。