10+個頂級Vue.js工具和函式庫（分享）

Vue持續流行，並被許多開發人員迅速採用，並且Vue.js工具隨處可見。這並非沒有道理：Vue的學習曲線淺，功能驅動的結構清晰明了，並且出色的文檔資料使新手可以輕鬆上手，而經驗豐富的開發人員也可以從其他框架（如React或Angular）進行切換。

如果您認真對待Vue開發，遲早會遇到一些脫穎而出的基本工具和函式庫。使用它們可以提升您作為Vue開發人員的職業生涯，並使您感到自己像專家。

我已經整理了一份清單，其中列出了您應該了解並最終在Vue.js專案中使用的最著名的工具和函式庫。與目前僅列出UI元件庫的許多其他文章不同，該彙編探索了Vue生態系統中工具，庫和插件的廣泛混合。

我是根據它們的有用性，有效性和獨特性選擇它們的，而不是基於它們的GitHub受歡迎程度或星級。

Vue CLI

#如今，對於每個JavaScript應用程式框架而言，似乎都必須具備某種CLI工具。 Vue也不例外。 Vue CLI是用於快速Vue開發的功能齊全的工具集。除了通常的專案支架外，它還可以透過使用其即時原型製作功能來嘗試新的想法，甚至無需創建完整的專案。

預設情況下，Vue CLI提供對主要Web開發工具和技術的支持，例如Babel，TypeScript，ESLint，PostCSS，PWA，Jest，Mocha，Cypress和Nightwatch。這要歸功於其可擴展的插件系統。這意味著社群可以建立和共享可重複使用的插件以滿足常見需求。

但是錦上添花的是功能強大的GUI (Vue UI，隨CLI一起提供)，它允許您輕鬆地創建項目，然後在不需要彈出的情況下配置和管理項目。

點擊這裡查看：Vue CLI

VuePress

Vue生態系統中的下一個主要參與者是VuePress，這是一個由Vue驅動的靜態網站產生器。最初是作為編寫技術文件的工具而創建的，現在它是一個小型，緊湊且功能強大的無頭CMS。從1.x版開始，它提供了出色的部落格功能和強大的插件系統。它帶有一個預設主題（根據技術文件提供），但是您也可以建立自訂主題或使用社群中的預製選項。

在VuePress中，您可以在Markdown中編寫內容，然後將其轉換為預先渲染的靜態HTML檔案。載入這些檔案後，您的網站將作為由Vue，Vue Router和Webpack支援的單頁應用程式運行。

VuePress的主要優點之一是您可以在Markdown檔案中包含Vue程式碼或元件。這為您帶來了強大的功能和靈活性，因為您幾乎可以像常規的Vue應用程式一樣開發網站，並從中獲得所有好處。

點擊這裡查看：VuePress

Gridsome

##Gridsome與VuePress有許多相似之處，但是在處理資料來源時採用了非常強大的方法。它使您可以連接和使用應用程式中的多種數據，然後將這些數據統一在一個GraphQL層中。基本上，Gridsome將Vue用於前端功能，並將GraphQL用於資料管理。可以透過以下三個步驟總結其運作方式：

• 您以Markdown，JSON，YAML或CVS資料格式提供內容，或從WordPress或Drupal等CMS匯入內容。

• 內容轉換為GraphQL層，該層提供集中的資料管理。然後，您可以使用這些數據透過Vue建立您的應用程式。

• 您可以將預先渲染的HTML檔案部署到靜態Web主機或CDN，例如Netlify，Amazon S3，Now.sh，Surge.sh等。

Gridsome提供了一些很好的最佳實踐，例如程式碼拆分，資產優化，漸進式圖像和連結預取。因此，Gridsome速度很快，並且支援PWA和SEO友好。

點擊這裡查看：

Gridsome
#

Vuex

#狀態管理是開發人員在網路應用程式建置中遇到的主要問題之一。為了解決這個問題，Vue提供了一個狀態管理系統Vuex。它充當應用程式中所有元件的集中存儲，其中狀態只能以可預測的方式進行更改。 store是一個特殊的對象，分為四個部分：

• state – 儲存應用程式資料的物件

• getters – 包含用於抽象存取狀態的方法的物件

• mutations – 包含直接影響狀態的方法的物件

• actions – 包含用於觸發變異和執行非同步程式碼的方法的物件

store也可以分為多個模組，以實現更好的可維護性。

點擊這裡看：Vuex

Nuxt

在使用伺服器端渲染（SSR）時，通常採用Nuxt。這是用於建立通用應用程式的簡單直接的框架。它也是模組化的，因此您只能使用應用程式所需的那些模組。

使用Nuxt，您可以建立伺服器呈現的應用程式（SSR），單頁應用程式（SPA），漸進式Web應用程式（PWA），或僅將其用作靜態網站產生器。

簡而言之，Nuxt使您擺脫了結構化和優化應用程式的繁瑣工作，從而為您提供了精簡且更令人愉悅的開發體驗。

點擊這裡看：Nuxt

Vuetify

##Vuetify是目前最好的UI元件庫之一。它基於Material Design規範提供了大量的精心設計的組件（80多個），幾乎可以滿足任何應用程式的需求。

您可以使用它來建立SSR應用程序，SPA，PWA和行動應用程式。您可以啟動新應用程式或將其新增至現有應用程式。它提供免費和高級主題，但是您也可以建立自己的主題。它還提供了一個僅選擇和選擇正在使用的組件的系統，從而極大地減少了應用程式的最終大小。

Vuetify的所有元件都有很好的文件記錄，並提供了清晰的範例。

點擊這裡查看：

Vuetify

##Quasar

##Quasar

是JavaScript版本的「一次寫入，到處運行」的Java哲學。它是一個通用的、支援Vue的框架，允許您使用相同的程式碼庫為不同的平台編寫應用程式。 spas，pwas，ssr應用，混合行動應用或多平台桌面應用，你來命名吧！ 它有很好的文件和大量的元件，設計時考慮到了效能和回應能力。 Quasar預設整合了最佳實踐（html/css/js縮小、快取破壞、樹抖動、來源映射、延遲載入的程式碼分割、es6傳輸、程式碼linting、可訪問性），因此您可以主要專注於應用程式的功能。它也為新項目的輕鬆搭建提供了一個cli工具。

點擊這裡查看：

Quasar

#Storybook

############################# #Vue主要是一個基於元件的框架，因此編寫好的、高效的元件對每個應用程式開發人員都至關重要。在此過程中，###Storybook###可能會派上用場。它使您可以在易於使用和隔離的環境中開發，管理和測試UI元件。該工具使開發人員可以獨立於主應用程式創建元件，並在隔離的開發環境中互動式地展示它們，而不必擔心特定於應用程式的依賴性和要求。 ###

Storybook提供了許多附加元件，以及靈活的API，可以根據需要自訂Storybook。也可以匯出一個靜態web應用程序，並將專案部署到任何HTTP伺服器。

點這裡看： Storybook

Vue Apollo

##最近有很多關於GraphQL的討論。因此，如果你已經熟悉它，並希望將其與Vue集成，你應該嘗試Vue Apollo

。這個函式庫讓Vue和GraphQL/Apollo的使用更加流暢和愉快。

點擊這裡查看：Vue Apollo

• #Eagle.js

Eagle.js

是使用Vue建構的功能強大，靈活且獨特的幻燈片系統。它使您可以在簡報中創建易於重複使用的元件，幻燈片和樣式。它還支援動畫，主題和互動式小部件，非常適合製作Web演示。 Eagle.js具有簡單且易於破解的API，因此您可以真正自由地製作所需的幻燈片。

您可以使用此程式庫執行的最大操作之一是將投影片放到單獨的檔案中，然後在其他投影片放映中重複使用。您也可以將特定投影片的投影片匯入另一個投影片中。使用如此強大的工具，您可以進行複雜，互動式且有趣的簡報。

點這裡看：

Eagle.js

5個更著名的Vue工具和函式庫

##Vue DevTools

是一個很棒的瀏覽器擴展，用於偵錯Vue和Vuex應用程式。

Vue Test Utils

是用於測試Vue元件的有用實用程式的集合。 ###############Vue Router### 是Vue的官方路由。 ###############Vue Native### 是用於行動應用程式的JavaScript框架，類似於React Native。 ###############Weex### 是一種使用現代網路技術（包括Vue）建立行動應用程式的框架。 ###############原文網址：https://www.zeolearn.com/interview-questions/vue-js############相關推薦： ############2020年前端vue面試題大匯總（附答案）############vue教學推薦：2020最新的5個vue.js影片教學精選############更多程式相關知識，請造訪：###程式設計入門###！ ！ ######

以上是10+個頂級Vue.js工具和函式庫（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！