最近有不少的粉絲私信我，怎么學Vue,有啥秘訣嗎？其實沒啥秘訣的。今天來推薦13個又熱門又實用的Vue.js 寶典庫，用心看完跟著這Vue 寶典來實戰操作，不出半個月，開發項目就得心應手了。

具體如下大綱：

1. 狀態管理

（1）Pinia

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

Github(9.3k)：https://github.com/vuejs/pinia

Pinia 是最新一代的 Vue 輕量級狀態管理庫。它適用于 Vue 2.x 和 Vue 3.x。它是 Vue 官方成員在2019年11月重新設計的一個狀態存儲庫，它允許你跨組件/頁面共享狀態，并且是響應式的，類似于 Vuex。

（2）Vuex

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

Github（27.9K）：https://github.com/vuejs/vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

（3）vuex-persist

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

Github（1.6k）：https://github.com/championswimmer/vuex-persist

vuex-persistedstate 是一個支持 Typescript 的Vuex插件，使你能夠將應用程序的狀態保存到持久存儲中，例如 Cookies 或 localStorage。

2. 表單

（1）VeeValidate

官方網址：https://vee-validate.logaretm.com/v4/

Github（9.4k）：https://github.com/logaretm/vee-validate

vee-validate 是Vue.js的表單驗證庫，它允許驗證輸入并以熟悉的聲明式樣式或使用組合函數構建更好的表單 UI。

（2）vue-form-making

官方網址：https://form.making.link/#/zh-CN/

Github（5k）：https://github.com/GavinZhuLei/vue-form-making

vue-form-making 是一個基于 vue 和 element-ui 實現的可視化表單設計器，使用了最新的前端技術棧，內置了 i18n 國際化解決方案，可以讓表單開發簡單而高效。

（3）FormKit

官方網址：https://formkit.com/#gh-dark-mode-only

Github（2.1k）：https://github.com/formkit/formkit

FormKit 是一個面向 Vue 開發人員的表單創作框架，它使構建高質量的生產就緒表單的速度提高了 10 倍。

3. 文檔

（1）VitePress

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

Github（6.3k）：https://github.com/vuejs/vitepress

VitePress 是 VuePress 的繼承者，建立在vite 之上。目前，正處于alpha階段。它已經適合開箱即用的文檔使用，但配置和主題 API 可能仍會在次要版本之間發生變化。

（2）VuePress

官方網址：https://v2.vuepress.vuejs.org/

Github（1.5k）：https://github.com/vuepress/vuepress-next

VuePress 是一個基于 Vue 的輕量級靜態網站生成器，以及為編寫技術文檔而優化的默認主題。它是為了滿足 Vue 自己的子項目文檔的需求而創建的。

（3）Gridsome

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

Github（8.4k）：https://github.com/gridsome/gridsome

Gridsome 是一個基于 Vue.js 構建的 Jamstack 框架，它讓開發人員可以輕松地構建靜態生成的網站和應用程序，這些網站和應用程序天生速度快。

4. 測試

（1）Vitest

官方網址：https://cn.vitest.dev/

Github（7.1k）：https://github.com/vitest-dev/vitest

Vitest 是一個由 Vite 提供支持的極速單元測試框架。其和 Vite 的配置、轉換器、解析器和插件保持一致，具有開箱即用的功能 TypeScript / JSX 支持。

（2）Jest

官方網址：https://jestjs.io/

Github（40.8k）：https://github.com/facebook/jest

Jest 是一個全面的 JavaScript 測試解決方案，專注于簡潔明快。適用于大多數 JavaScript 項目。

（3）Mocha

官方網址：https://mochajs.org/

Github（21.8k）：https://github.com/mochajs/mocha

mocha是一個功能豐富的javascript測試框架，運行在node.js和瀏覽器中，使異步測試變得簡單有趣。Mocha測試連續運行，允許靈活和準確的報告，同時將未捕獲的異常映射到正確的測試用例。

5. 可視化

（1）Vue ChartJS

官方網址：https://vue-chartjs.org/

Github（5k）：https://github.com/apertureless/vue-chartjs

vue-chartjs 是一個 Vue 對于 Chart.js 的封裝，讓用戶可以在Vue中輕松使用Chart.js，很簡單的創建可復用的圖表組件，非常適合需要簡單的圖表并盡可能快地運行的人。vue-chartjs抽象了基本邏輯，同時也暴露了Chart.js對象，讓用戶獲得最大的靈活性。它支持 Vue 3 和 Vue 2。

（2）Apache ECharts

官方網址：https://echarts.apache.org/zh/index.html

GitHub（53.5k）：https://github.com/apache/echarts

Apache ECharts 是一款基于Javascript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。它是用純 JavaScript 編寫的，基于zrender，是一個全新的輕量級畫布庫。

（3）Vue-ECharts

官方網址：https://vue-echarts.dev/

Github（7.7k）：https://github.com/ecomfe/vue-echarts

Vue-ECharts 是 Apache ECharts 的 Vue.js 組件。使用 Apache ECharts 5，同時支持 Vue.js 2/3。

（4）Trois

官方網址：https://troisjs.github.io/

Github（3k）：https://github.com/troisjs/trois

Trois 是一個基于 Three.JS 的 Vue 3 可視化庫，它是一個流行的 WebGL 庫。Three.JS 對桌面和移動設備都有很好的支持。該庫允許我們使用 VueJS 組件輕松為網站創建 3D 效果。

6. 組件

（1）Vue Grid Layout

官方網址：https://jbaysolutions.github.io/vue-grid-layout/zh/

Github（6K）：https://github.com/jbaysolutions/vue-grid-layout

vue-grid-layout 是一個網格布局系統，類似于 Gridster，用于 Vue.js。

（2）Vue Draggable

DEMO網址：https://sortablejs.github.io/vue.draggable.next/

Github（18.2k）：https://github.com/SortableJS/Vue.Draggable

Vue Draggable 是一個基于 Sortable.js 的 Vue 拖拽組件。

（3）Vue Tour

?Github（2.2k）：https://github.com/pulsardev/vue-tour

Vue Tour 是一個輕量級、簡單且可定制的導覽插件，可與 Vue.js 一起使用。它提供了一種快速簡便的方法來指導用戶完成你的應用程序。?

（4）Swiper.js

官方網址：https://swiperjs.com/

Github（33.3k）：https://github.com/nolimits4web/swiper

Swiper 是一款免費以及輕量級的移動設備觸控滑塊的框架，使用硬件加速過渡。主要使用于移動端的網站、網頁應用程序，以及原生的應用程序。

（5）vue-easytable

官方網址：http://huangshuwei.gitee.io/vue-easytable/

Github（3.1k）：https://github.com/Happy-Coding-Clans/vue-easytable

該庫提供了一?個功能齊全且高度可定制的表格組件/數據網格。它支持許多功能，如虛擬滾動、列固定、標題固定、標題分組、過濾器、排序、單元格省略號、行擴展、行復選框等。

7. UI 組件

（1）Element Plus

官方網址：https://element.eleme.io/#/en-US

GitHub（52.9k）：https://github.com/ElemeFE/element

Element Plus，由餓了么大前端團隊開源出品的一套為開發者、設計師和產品經理準備的基于 Vue 3.0 的組件庫，Element Plus 是基于 Vue3 面向設計師和開發者的組件庫，提供了配套設計資源，幫助你的網站快速成型。

（2）Vuetify

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

GitHub（35.9）：https://github.com/vuetifyjs/vuetify?

Vuetify 是一個基于 Vue.js 精心打造 UI 組件庫，整套 UI 設計為 Material 風格。能夠讓沒有任何設計技能的開發者創造出時尚的 Material 風格界面。

（3）Vant

官方網址：https://vant-contrib.gitee.io/vant/

Github（20.5k）：https://github.com/youzan/vant

Vant 是一套輕量、可靠的移動端組件庫。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率，支持 Vue 3。

（4）Naive UI

官方網址：https://www.naiveui.com/

Github（10.9k）：https://github.com/TuSimple/naive-ui

Naive UI 是一款基于當前比較新的 Vue 3.0/TypeScript 技棧開發的前端 UI 組件庫。

8. 動畫

（1）Animate.css

官方網址：https://animate.style/

GitHub（76.4k）：https://github.com/animate-css/animate.css

animate.css 是一個使用CSS3的animation制作的動畫效果的CSS集合，里面預設了很多種常用的動畫，且使用非常簡單。

（2）Greensock

官方網址：https://greensock.com/

Github（15.3k）：https://github.com/greensock/GreenSock-JS/

GreenSock是一個JavaScript動畫庫，可輕松對HTML元素進行動畫處理。用于創建高性能，零依賴性，跨瀏覽器動畫，聲稱在超過 400 萬個網站中使用。

（3）Popmotion

官方地址：https://popmotion.io/

Github（19.2k）：https://github.com/Popmotion/popmotion

Popmotion 是一個只有12KB的 JavaScript 運動引擎，可以用來實現動畫，物理效果和輸入跟蹤。原生的DOM支持：CSS，SVG，SVG路徑和DOM屬性的支持，開箱即用。

（4）Vue Kinesis

官方網址：https://www.aminerman.com/kinesis/

Github（1.3k）：https://github.com/Aminerman/vue-kinesis

Vue Kinesis 支持使用 Vue.js 輕松創建復雜的交互式動畫，其支持 Vue 3。

9. 圖標

（1）IconPark

官方網址：http://iconpark.bytedance.com/

Github（6.7k）：https://github.com/bytedance/iconpark

IconPark 提供超過 2400 個高質量圖標，還提供了每個圖標的含義和來源的描述，便于開發者使用。除此之外，該網站還可以自定義圖標，這是與其他圖標網站與眾不同的地方。該圖標庫是字節跳動旗下的技術驅動圖標樣式的開源圖標庫。

（2）Font Awesome

官方地址：https://fontawesome.com/

Github（70.5k）：https://github.com/FortAwesome/Font-Awesome

Font Awesome 提供了可縮放的矢量圖標，可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。

（3）Ionicons

官網地址：http://ionicons.com/

Github（16.5k）：https://github.com/ionic-team/ionicons

Ionicons 是一個完全開源的圖標集，是知名混合開發框架 Ionic Framework 內置的圖標庫，包含 1300 個設計優雅、風格統一的高質量圖標，能滿足大多數的業務場景。

（4）Bootstrap Icons

官網地址：https://icons.getbootstrap.com/

Github（6.5k）：https://github.com/twbs/icons

Bootstrap Icons 是 Bootstrap 開源的 SVG 圖標庫，此圖標庫起初專門針對其組件（從表單控件到導航）和文檔進行定制設計和構建，現在可以免費用于任何項目。

10. 富文本編輯器

（1）Tiptap

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

GitHub（17.2k）：https://github.com/ueberdosis/tiptap

Tiptap 是一個基于 Vue 的無渲染的富文本編輯器，它基于 Prosemirror，完全可擴展且無渲染?？梢暂p松地將自定義節點添加為Vue組件。使用無渲染組件（函數式組件），幾乎完全控制標記和樣式。菜單的外觀或在DOM中的顯示位置。這完全取決于使用者。

（2）Quill.js

GitHub（34.1k）：https://github.com/quilljs/quill/

Quill.js 是一個具有跨平臺和跨瀏覽器支持的富文本編輯器。憑借其可擴展架構和富有表現力的 API，可以完全自定義它以滿足個性化的需求。

（3）TinyMCE

官方網址：https://www.tiny.cloud/

GitHub（12.2k）：https://github.com/tinymce/tinymce

TinyMCE 是一個熱門的富文本編輯器。它的目標是幫助其他開發人員構建精美的 Web 內容解決方案。它易于集成，可以部署在基于云的、自托管或混合環境中。該設置使得合并諸如 Angular、React 和 Vue 等框架成為可能。它還可以使用 50 多個插件進行擴展，每個插件都有 100 多個自定義選項。

（4）CKEditor 5

官方網址：https://ckeditor.com/ckeditor-5

GitHub（6.6k）：https://github.com/ckeditor/ckeditor5

CKEditor 是一個強大的富文本編輯器框架，具有模塊化架構、現代集成和協作編輯等功能。它可以通過基于插件的架構進行擴展，從而可以將必要的內容處理功能引入。它是在 ES6 中從頭開始編寫的，并且具有出色的 webpack支持。可以使用與Angular、React和Vue.js的原生集成。

11. 服務端渲染

（1）Nuxt.js

官方網址：https://nuxtjs.org/

Github（41.7k）：https://github.com/nuxt/nuxt.js

Nuxt.js 是一個基于 Vue.js 的通用應用框架。通過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI 渲染。它預設了利用 Vue.js 開發服務端渲染的應用所需要的各種配置。

（2）SSR

官方網址：http://doc.ssr-fc.com/

Github（2.2k）：https://github.com/zhangyuang/ssr

ssr 框架是為前端框架在服務端渲染的場景下所打造的開箱即用的服務端渲染框架。面向 Serverless，同時支持 React，Vue2，Vue3。

（3）Vue-meta

?官方地址：https://vue-meta.nuxtjs.org/

Github（4k）：https://github.com/nuxt/vue-meta

Vue-meta 是 Vue.js 的一個插件，它可以幫助你使用 SSR 支持管理 Vue.js 組件中的 HTML 元數據。Vue-meta 使用 Vue 的內置響應性使管理應用程序的元數據變得簡單。

12. 數據獲取

（1）Axios

官方網址：https://axios-http.com/

Github（97.5k）：https://github.com/axios/axios

Axios 是一個基于promise 的網絡請求庫，作用于node.js和瀏覽器中。

（2）vue-resource

Github（10.1k）：https://github.com/pagekit/vue-resource

vue-resource是 Vue.js 的一款插件，它可以通過XMLHttpRequest或JSONP發起請求并處理響應。

（3）vue-axios

官方網址：https://www.npmjs.com/package/vue-axios

Github（2k）：https://github.com/imcvampire/vue-axios

vue-axios 是一個將 axios 集成到 Vuejs 的小型庫。

13. 構建工具

（1）Vite

官方網址：http://vitejs.dev/

Github（49.9k）：https://github.com/vitejs/vite

Vite 是下一代前端開發與構建工具。Vite 意在提供開箱即用的配置，同時它的插件 API 和 JavaScript API 帶來了高度的可擴展性，并有完整的類型支持。

（2）Webpack

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

Github（62.1k）：https://github.com/webpack/webpack

webpack 是一個用于現代JavaScript應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個依賴圖(dependency graph)，此依賴圖對應映射到項目所需的每個模塊，并生成一個或多個 bundle。