十款熱門的Vue.js工具和庫

眾所周知，Vue目前越來越熱門，被很多開發(fā)人員采用，因此其生態(tài)也越來越完善，相關(guān)的工具和庫也很豐富。這主要得益于：Vue的學(xué)習(xí)曲線，清晰的設(shè)計結(jié)構(gòu)和使用文檔，讓有經(jīng)驗的開發(fā)人員從其他框架（React和Angular）很方便的入手。今天的這篇文章筆者從這些工具的實用性、有效性、獨特性選了這十款工具和庫，而不是依據(jù)Github受歡迎程度或星級，有些你已經(jīng)很熟悉了并在使用，有些還比較陌生，好了，讓我來一起看下這十款熱門的工具和庫。

1、Vue CLI

和其他前端框架一樣，為了方便開發(fā)者快速上手，都提供CLI類似的腳手架工具。Vue CLI是一套功能齊全的工具，可用于快速Vue開發(fā)。Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認配置即可平穩(wěn)銜接，這樣你可以專注在撰寫應(yīng)用上，而不必花好幾天去糾結(jié)配置的問題。比如你能在項目中很輕松的集成類似Babel，TypeScript，ESLint，Postcss，PWA，Jest，Mocha，Cypress和Nightwatch等這些插件。

2、VuePress

VuePress是以Vue驅(qū)動的靜態(tài)網(wǎng)站生成器，是一個由Vue、Vue Router和webpack驅(qū)動的單頁應(yīng)用。在VuePress中，你可以使用Markdown編寫文檔，然后生成網(wǎng)頁，每一個由VuePress生成的頁面都帶有預(yù)渲染好的html，也因此具有非常好的加載性能和搜索引擎優(yōu)化。同時，一旦頁面被加載，Vue將接管這些靜態(tài)內(nèi)容，并將其轉(zhuǎn)換成一個完整的單頁應(yīng)用，其他的頁面則會只在用戶瀏覽到的時候才按需加載。

官方地址：https://v1.vuepress.vuejs.org/

3、Gridsome

Gridsome類似VuePress，但不完全相同，它也是使用開發(fā)人員喜愛的最新網(wǎng)絡(luò)技術(shù)工具構(gòu)建網(wǎng)站 - Vue.js，GraphQL和Webpack。獲得熱重新加載和Node.js的所有功能。 Gridsome讓搭建筑網(wǎng)站再次變得有趣。如果你想建個博客站，可以考慮下。其特點如下：

使用Vue.js，webpack和Node.js等現(xiàn)代工具構(gòu)建網(wǎng)站。
使用任何CMS或數(shù)據(jù)源獲取內(nèi)容。從wordPress/ target=_blank class=infotextkey>WordPress，Contentful，本地Markdown或任何其他無頭CMS或API中提取數(shù)據(jù)。
首先只加載關(guān)鍵的HTML，CSS和JAVAScript。然后預(yù)取下一頁，以便用戶可以非常快速地點擊，而無需重新加載頁面，即使在離線時也是如此。
Gridsome使用超快速靜態(tài)站點生成器，JavaScript和API的強大功能來創(chuàng)建令人驚嘆的動態(tài)Web體驗。
Gridsome站點通常不連接到任何數(shù)據(jù)庫，并且可以完全托管在全局CDN上。它可以處理數(shù)千到數(shù)百萬次點擊，并且不需要昂貴的服務(wù)器成本。

官方地址：https://gridsome.org/

4、Vuex

在SPA單頁面組件的開發(fā)中 Vue的vuex和React的Redux 都統(tǒng)稱為同一狀態(tài)管理，個人的理解是全局狀態(tài)管理更合適；簡單的理解就是你在state中定義了一個數(shù)據(jù)之后，你可以在所在項目中的任何一個組件里進行獲取、進行修改，并且你的修改可以得到全局的響應(yīng)變更。每一個 Vuex 應(yīng)用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。store包含四個部分：

state – 應(yīng)用的數(shù)據(jù)內(nèi)容對象
getters – 定義相關(guān)方法獲取state中的數(shù)據(jù)
mutations – 定義的相關(guān)方法操作state中的數(shù)據(jù)
actions – Action 類似于 mutation，不同在于：Action 提交的是 mutation，而不是直接變更狀態(tài)；Action 可以包含任意異步操作。

官方網(wǎng)址：https://vuex.vuejs.org/

5、 Nuxt

Nuxt.js 是一個基于 Vue.js 的輕量級應(yīng)用框架,可用來創(chuàng)建服務(wù)端渲染 (SSR) 應(yīng)用,也可充當(dāng)靜態(tài)站點引擎生成靜態(tài)站點應(yīng)用,具有優(yōu)雅的代碼結(jié)構(gòu)分層和熱加載等特性。

其官方地址：https://nuxtjs.org/

6、Vuetify

Vuetify目前是基于vue的最好的UI組件庫之一。它提供了大量基于Material Design規(guī)范精心制作的組件（80+），足以滿足任何應(yīng)用程序的需求。

您可以使用它來構(gòu)建SSR應(yīng)用程序，SPA，PWA和移動應(yīng)用程序。所有Vuetify組件都有很好的文檔說明，并提供了清晰的示例。

官方網(wǎng)址：https://vuetifyjs.com/en/

7、Quasar

Quasar（發(fā)音為/kwe?.zɑ?/)是MIT許可的開源框架（基于Vue），可幫助Web開發(fā)人員創(chuàng)建：

響應(yīng)式網(wǎng)站
PWA（Progressive Web App）
通過Apache Cordova構(gòu)建移動APP（Android，IOS，…）
多平臺桌面應(yīng)用程序（使用Electron）

Quasar允許開發(fā)人員編寫一次代碼，然后使用相同的代碼庫同時部署為網(wǎng)站、PWA、Mobile App和Electron App。使用最先進的CLI設(shè)計應(yīng)用程序，并提供精心編寫，速度非常快的Quasar Web組件。

當(dāng)使用Quasar時，你不需要加載像Hammerjs，Momentjs或Bootstrap這樣額外的庫。它擁有這些功能，而且體積很小！

官方網(wǎng)址：https://quasar.dev/

8、Storybook

對于前端開發(fā)來說，組件化技術(shù)已經(jīng)是一門必修課了，這其中又主要以 react 和 vue 為主。但平時在開發(fā)組件，尤其是公共組件或者第三方組件庫的時候，往往會有一些困擾：

不能很好的管理多個組件，尤其是在組件預(yù)覽的時候，不能一目了然
在組件預(yù)覽的時候，也不能很好的反應(yīng)一個組件的多個不同狀態(tài)
自動化交互測試可以使用 enzyme，但很多時候還得手動測試，就比較麻煩了
在寫文檔的時候，需要將組件預(yù)覽和文檔寫在一起，并需要切換到不同的狀態(tài)，就比較吃力了

所以，storybook 就是為了解決這些問題而出現(xiàn)的，它為你的組件搭建了一個強大的開發(fā)環(huán)境，主要提供了以下的幾個功能：

提供了一個強大的 UI 組件管理頁面，可以很便捷、清晰的分組、管理多個組件或一個組件的多個不同狀態(tài)
在自動化交互測試之外，可以很方便的進行手動交互測試，并且可以動態(tài)改變組件參數(shù)，查看視圖變化
可以將組件預(yù)覽導(dǎo)出為靜態(tài)資源，這樣就可以很方便查看組件的文檔和不同參數(shù)對應(yīng)的不同視圖
還有一系列的插件，提供了很多額外的功能，幫助你更好的開發(fā)、測試、優(yōu)化組件

該工具使開發(fā)人員能夠獨立于主應(yīng)用程序創(chuàng)建組件，并在隔離的開發(fā)環(huán)境中以交互方式展示它們，而無需擔(dān)心特定于應(yīng)用程序的依賴關(guān)系和要求。方便開發(fā)人員、產(chǎn)品經(jīng)理、設(shè)計人員等多人參與到項目中。

官方網(wǎng)址：https://storybook.js.org/