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

具體如下大綱：

1. 狀態(tài)管理

（1）Pinia

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

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

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

（2）Vuex

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

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

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

（3）vuex-persist

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

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

vuex-persistedstate 是一個支持 Typescript 的Vuex插件，使你能夠?qū)?yīng)用程序的狀態(tài)保存到持久存儲中，例如 Cookies 或 localStorage。

2. 表單

（1）VeeValidate

官方網(wǎng)址：https://vee-validate.logaretm.com/v4/

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

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

（2）vue-form-making

官方網(wǎng)址：https://form.making.link/#/zh-CN/

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

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

（3）FormKit

官方網(wǎng)址：https://formkit.com/#gh-dark-mode-only

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

FormKit 是一個面向 Vue 開發(fā)人員的表單創(chuàng)作框架，它使構(gòu)建高質(zhì)量的生產(chǎn)就緒表單的速度提高了 10 倍。

3. 文檔

（1）VitePress

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

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

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

（2）VuePress

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

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

VuePress 是一個基于 Vue 的輕量級靜態(tài)網(wǎng)站生成器，以及為編寫技術(shù)文檔而優(yōu)化的默認主題。它是為了滿足 Vue 自己的子項目文檔的需求而創(chuàng)建的。

（3）Gridsome

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

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

Gridsome 是一個基于 Vue.js 構(gòu)建的 Jamstack 框架，它讓開發(fā)人員可以輕松地構(gòu)建靜態(tài)生成的網(wǎng)站和應(yīng)用程序，這些網(wǎng)站和應(yīng)用程序天生速度快。

4. 測試

（1）Vitest

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

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

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

（2）Jest

官方網(wǎng)址：https://jestjs.io/

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

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

（3）Mocha

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

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

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

5. 可視化

（1）Vue ChartJS

官方網(wǎng)址：https://vue-chartjs.org/

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

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

（2）Apache ECharts

官方網(wǎng)址：https://echarts.apache.org/zh/index.html

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

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

（3）Vue-ECharts

官方網(wǎng)址：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

官方網(wǎng)址：https://troisjs.github.io/

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

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

6. 組件

（1）Vue Grid Layout

官方網(wǎng)址：https://jbaysolutions.github.io/vue-grid-layout/zh/

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

vue-grid-layout 是一個網(wǎng)格布局系統(tǒng)，類似于 Gridster，用于 Vue.js。

（2）Vue Draggable

DEMO網(wǎng)址：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 是一個輕量級、簡單且可定制的導(dǎo)覽插件，可與 Vue.js 一起使用。它提供了一種快速簡便的方法來指導(dǎo)用戶完成你的應(yīng)用程序。?

（4）Swiper.js

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

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

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

（5）vue-easytable

官方網(wǎng)址：http://huangshuwei.gitee.io/vue-easytable/

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

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

7. UI 組件

（1）Element Plus

官方網(wǎng)址：https://element.eleme.io/#/en-US

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

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

（2）Vuetify

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

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

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

（3）Vant

官方網(wǎng)址：https://vant-contrib.gitee.io/vant/

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

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

（4）Naive UI

官方網(wǎng)址：https://www.naiveui.com/

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

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

8. 動畫

（1）Animate.css

官方網(wǎng)址：https://animate.style/

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

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

（2）Greensock

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

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

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

（3）Popmotion

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

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

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

（4）Vue Kinesis

官方網(wǎng)址：https://www.aminerman.com/kinesis/

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

Vue Kinesis 支持使用 Vue.js 輕松創(chuàng)建復(fù)雜的交互式動畫，其支持 Vue 3。

9. 圖標

（1）IconPark

官方網(wǎng)址：http://iconpark.bytedance.com/

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

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

（2）Font Awesome

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

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

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

（3）Ionicons

官網(wǎng)地址：http://ionicons.com/

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

Ionicons 是一個完全開源的圖標集，是知名混合開發(fā)框架 Ionic Framework 內(nèi)置的圖標庫，包含 1300 個設(shè)計優(yōu)雅、風(fēng)格統(tǒng)一的高質(zhì)量圖標，能滿足大多數(shù)的業(yè)務(wù)場景。

（4）Bootstrap Icons

官網(wǎng)地址：https://icons.getbootstrap.com/

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

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

10. 富文本編輯器

（1）Tiptap

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

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

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

（2）Quill.js

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

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

（3）TinyMCE

官方網(wǎng)址：https://www.tiny.cloud/

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

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

（4）CKEditor 5

官方網(wǎng)址：https://ckeditor.com/ckeditor-5

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

CKEditor 是一個強大的富文本編輯器框架，具有模塊化架構(gòu)、現(xiàn)代集成和協(xié)作編輯等功能。它可以通過基于插件的架構(gòu)進行擴展，從而可以將必要的內(nèi)容處理功能引入。它是在 ES6 中從頭開始編寫的，并且具有出色的 webpack支持?？梢允褂门cAngular、React和Vue.js的原生集成。

11. 服務(wù)端渲染

（1）Nuxt.js

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

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

Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI 渲染。它預(yù)設(shè)了利用 Vue.js 開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。

（2）SSR

官方網(wǎng)址：http://doc.ssr-fc.com/

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

ssr 框架是為前端框架在服務(wù)端渲染的場景下所打造的開箱即用的服務(wù)端渲染框架。面向 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 元數(shù)據(jù)。Vue-meta 使用 Vue 的內(nèi)置響應(yīng)性使管理應(yīng)用程序的元數(shù)據(jù)變得簡單。

12. 數(shù)據(jù)獲取

（1）Axios

官方網(wǎng)址：https://axios-http.com/

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

Axios 是一個基于promise 的網(wǎng)絡(luò)請求庫，作用于node.js和瀏覽器中。

（2）vue-resource

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

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

（3）vue-axios

官方網(wǎng)址：https://www.npmjs.com/package/vue-axios

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

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

13. 構(gòu)建工具

（1）Vite

官方網(wǎng)址：http://vitejs.dev/

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

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

（2）Webpack

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

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

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