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

衆所周知，Vue目前愈來愈熱門，被不少開發人員採用，所以其生態也愈來愈完善，相關的工具和庫也很豐富。這主要得益於：Vue的學習曲線，清晰的設計結構和使用文檔，讓有經驗的開發人員從其餘框架（React和Angular）很方便的入手。今天的這篇文章筆者從這些工具的實用性、有效性、獨特性選了這十款工具和庫，而不是依據Github受歡迎程度或星級，有些你已經很熟悉了並在使用，有些還比較陌生，好了，讓我來一塊兒看下這十款熱門的工具和庫。

一、Vue CLI

和其餘前端框架同樣，爲了方便開發者快速上手，都提供CLI相似的腳手架工具。Vue CLI是一套功能齊全的工具，可用於快速Vue開發。Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。好比你能在項目中很輕鬆的集成相似Babel，TypeScript，ESLint，PostCSS，PWA，Jest，Mocha，Cypress和Nightwatch等這些插件。

二、VuePress

VuePress是以Vue驅動的靜態網站生成器，是一個由Vue、Vue Router和webpack驅動的單頁應用。在VuePress中，你可使用Markdown編寫文檔，而後生成網頁，每個由VuePress生成的頁面都帶有預渲染好的HTML，也所以具備很是好的加載性能和搜索引擎優化。同時，一旦頁面被加載，Vue將接管這些靜態內容，並將其轉換成一個完整的單頁應用，其餘的頁面則會只在用戶瀏覽到的時候才按需加載。

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

三、Gridsome

Gridsome相似VuePress，但不徹底相同，它也是使用開發人員喜好的最新網絡技術工具構建網站 - Vue.js，GraphQL和Webpack。 得到熱從新加載和Node.js的全部功能。 Gridsome讓搭建築網站再次變得有趣。若是你想建個博客站，能夠考慮下。 其特色以下：

• 使用Vue.js，webpack和Node.js等現代工具構建網站。
• 使用任何CMS或數據源獲取內容。從WordPress，Contentful，本地Markdown或任何其餘無頭CMS或API中提取數據。
• 首先只加載關鍵的HTML，CSS和JavaScript。而後預取下一頁，以便用戶能夠很是快速地點擊，而無需從新加載頁面，即便在離線時也是如此。
• Gridsome使用超快速靜態站點生成器，JavaScript和API的強大功能來建立使人驚歎的動態Web體驗。
• Gridsome站點一般不鏈接到任何數據庫，而且能夠徹底託管在全局CDN上。它能夠處理數千到數百萬次點擊，而且不須要昂貴的服務器成本。

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

四、Vuex

在SPA單頁面組件的開發中 Vue的vuex和React的Redux 都統稱爲同一狀態管理，我的的理解是全局狀態管理更合適；簡單的理解就是你在state中定義了一個數據以後，你能夠在所在項目中的任何一個組件裏進行獲取、進行修改，而且你的修改能夠獲得全局的響應變動。每個 Vuex 應用的核心就是 store（倉庫）。「store」基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。store包含四個部分：

• state – 應用的數據內容對象
• getters – 定義相關方法獲取state中的數據
• mutations – 定義的相關方法操做state中的數據
• actions – Action 相似於 mutation，不一樣在於：Action 提交的是 mutation，而不是直接變動狀態；Action 能夠包含任意異步操做。

官方網址：https://vuex.vuejs.org/

五、 Nuxt

Nuxt.js 是一個基於 Vue.js 的輕量級應用框架,可用來建立服務端渲染 (SSR) 應用,也可充當靜態站點引擎生成靜態站點應用,具備優雅的代碼結構分層和熱加載等特性。

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

六、Vuetify

Vuetify目前是基於vue的最好的UI組件庫之一。它提供了大量基於Material Design規範精心製做的組件（80+），足以知足任何應用程序的需求。

您可使用它來構建SSR應用程序，SPA，PWA和移動應用程序。全部Vuetify組件都有很好的文檔說明，並提供了清晰的示例。

官方網址：https://vuetifyjs.com/en/

七、Quasar

Quasar（發音爲/kweɪ.zɑɹ/)是MIT許可的開源框架（基於Vue），可幫助Web開發人員建立：

• 響應式網站
• PWA（Progressive Web App）
• 經過Apache Cordova構建移動APP（Android，iOS，…）
• 多平臺桌面應用程序（使用Electron）

Quasar容許開發人員編寫一次代碼，而後使用相同的代碼庫同時部署爲網站、PWA、Mobile App和Electron App。使用最早進的CLI設計應用程序，並提供精心編寫，速度很是快的Quasar Web組件。

當使用Quasar時，你不須要加載像Hammerjs，Momentjs或Bootstrap這樣額外的庫。它擁有這些功能，並且體積很小！

官方網址：https://quasar.dev/

八、Storybook

對於前端開發來講，組件化技術已是一門必修課了，這其中又主要以 react 和 vue 爲主。但平時在開發組件，尤爲是公共組件或者第三方組件庫的時候，每每會有一些困擾：

• 不能很好的管理多個組件，尤爲是在組件預覽的時候，不能一目瞭然
• 在組件預覽的時候，也不能很好的反應一個組件的多個不一樣狀態
• 自動化交互測試可使用 enzyme，但不少時候還得手動測試，就比較麻煩了
• 在寫文檔的時候，須要將組件預覽和文檔寫在一塊兒，並須要切換到不一樣的狀態，就比較吃力了

因此，storybook 就是爲了解決這些問題而出現的，它爲你的組件搭建了一個強大的開發環境，主要提供瞭如下的幾個功能：

• 提供了一個強大的 UI 組件管理頁面，能夠很便捷、清晰的分組、管理多個組件或一個組件的多個不一樣狀態
• 在自動化交互測試以外，能夠很方便的進行手動交互測試，而且能夠動態改變組件參數，查看視圖變化
• 能夠將組件預覽導出爲靜態資源，這樣就能夠很方便查看組件的文檔和不一樣參數對應的不一樣視圖
• 還有一系列的插件，提供了不少額外的功能，幫助你更好的開發、測試、優化組件

該工具使開發人員可以獨立於主應用程序建立組件，並在隔離的開發環境中以交互方式展現它們，而無需擔憂特定於應用程序的依賴關係和要求。方便開發人員、產品經理、設計人員等多人蔘與到項目中。

官方網址：https://storybook.js.org/

九、Vue Apollo

最近有不少關於GraphQL的討論。所以，若是您已經熟悉它並但願將其與Vue集成，那麼您應該嘗試Vue Apollo。這個庫能很方便的將Vue和GraphQL集成。

官方網址：https://vue-apollo.netlify.com/

十、Eagle.js

Eagle.js 是一個基於 Vue.js Web 框架構建的幻燈片系統。它支持動畫、主題、互動小部件（用於網絡演示），而且能夠輕鬆地在演示文稿之間重用組件、幻燈片和樣式。

官方網址：https://github.com/zulko/eagle.js/

小節

今天的內容就到這裏，但願你能找到心意的工具和庫，若是你有好的工具和庫推薦，歡迎你在留言區進行分享。

更多精彩內容，請微信關注「前端達人」公衆號！