首頁 > 美食

推薦13個又熱門又實用的Vue開源寶典庫

由 Echa攻城獅發表于美食2023-01-03

大家好，我是 Echa。

最近有不少的老鐵們私信我，怎麼學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，完全可擴充套件且無渲染。可以輕鬆地將自定義節點新增為Vue元件。使用無渲染元件（函式式元件），幾乎完全控制標記和樣式。選單的外觀或在DOM中的顯示位置。這完全取決於使用者。

（2）Quill。js

官方網址：https：//quilljs。com/

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 多個自定義選項。