技術文章 » 10+個頂級Vue.js工具和庫（分享）

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

2020-09-28 09:00:22

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

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

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

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

Vue CLI

1.png

如今，對於每個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

2.png

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

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

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

點選這裡檢視：VuePress

Gridsome

3.png

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

4.png

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

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

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

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

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

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

點選這裡檢視：Vuex

Nuxt

5.png

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

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

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

點選這裡檢視：Nuxt

Vuetify

6.png

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

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

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

點選這裡檢視：Vuetify

Quasar

7.png

Quasar是JavaScript版本的「一次寫入，到處執行」的Java哲學。它是一個通用的、支援Vue的框架，允許您使用相同的程式碼庫為不同的平臺編寫應用程式。spas，pwas，ssr應用，混合移動應用或多平臺桌面應用，你來命名吧！

它有很好的檔案和大量的元件，設計時考慮到了效能和響應能力。Quasar預設情況下整合了最佳實踐（html/css/js縮小、快取破壞、樹抖動、源對映、延遲載入的程式碼拆分、es6傳輸、程式碼linting、可存取性），因此您可以主要關注應用程式的功能。它還為新專案的輕鬆搭建提供了一個cli工具。

點選這裡檢視：Quasar

Storybook

8.png

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

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

點選這裡檢視： Storybook

Vue Apollo

9.png

最近有很多關於GraphQL的討論。因此，如果你已經熟悉它，並希望將其與Vue整合，你應該嘗試Vue Apollo。這個庫使Vue和GraphQL/Apollo的使用更加流暢和愉快。

點選這裡檢視：Vue Apollo

Eagle.js

10.png

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

相關推薦：

更多程式設計相關知識，請存取：！！

以上就是10+個頂級Vue.js工具和庫（分享）的詳細內容，更多請關注TW511.COM其它相關文章！