Vue3正式發(fā)布已經(jīng)快2年了，今年2月也正式變成 Vue 項目的默認版本。下面本篇文章就整理總結(jié)了40個Vue3 實用工具、UI庫、插件、生態(tài)分享給大家，希望對大家有所幫助。

1、Vue3 UI組件庫

UI組件庫是可以理解為是一個重復(fù)使用的界面設(shè)計元素的集合體 ，它是一個文件庫。 UI組件庫在整個系統(tǒng)中扮演的是行為層面的對接，是團隊內(nèi)部設(shè)計師和開發(fā)間的橫向協(xié)作，是保證產(chǎn)品輸出一致的規(guī)范基礎(chǔ)。（學(xué)習視頻分享：vue視頻教程）

這里整理了17個Vue3 UI組件庫，包含13個Web UI庫和4個 UI庫，閱讀文章《17個Vue3實用UI組件庫（Web+移動）分享》即可獲取。

Web UI庫

• ElementUI Plus：面向設(shè)計師和開發(fā)者的組件庫

• Ant Design of Vue：Ant Design 的 Vue 實現(xiàn)，開發(fā)和服務(wù)于企業(yè)級后臺產(chǎn)品

• BalmUI：基于谷歌的 Material Design設(shè)計的UI 組件庫

• Naive UI：基于 Vue 3.0/TypeScript 的免費開源前端 UI 組件庫

• arco.design：字節(jié)跳動企業(yè)級產(chǎn)品設(shè)計系統(tǒng)，支持React和Vue雙版本

• Quasar：一個完整的、以性能為中心的框架

• 。。。

移動UI庫

• Vant：移動端組件庫

• NutUI：京東風格的輕量級移動端 Vue 組件庫

• Varlet：Material 風格移動端組件庫

• nutui-bingo：京東基于 NutUI 的抽獎組件庫

2、Vue3實用開發(fā)工具

在之前的文章《7款值得收藏的Vue3實用開發(fā)工具（分享）》中，我們介紹了7個Vue3實用開發(fā)工具：

• unplugin-vue-components：按需組件自動導(dǎo)入插件

• vuex-persistedstate：Vuex持久化插件

• vuex-persist：支持 Typescript 的Vuex持久化插件

• @vueuse/gesture：手勢庫，使應(yīng)用程序具有交互性

• unplugin-auto-import

• pinia-plugin-persistedstate：Pinia 數(shù)據(jù)持久化儲存

• vue-termui.dev：一個基于 Vue.js 的終端 UI 框架

3、Vue3可視化工具

在科技的頻頻更新下，可視化開發(fā)工具成為了提升開發(fā)效率的有效工具。在之前的文章《【整理總結(jié)】4個Vue3可視化工具》中，我們介紹了4個Vue3可視化工具：

• Pdfvuer：用于Vue應(yīng)用中的一個PDF查看器

• vue3-marquee：無縫滾動組件

• Vue-ECharts：百度ECharts 的 Vue.js 組件

• iconpark：一個通過技術(shù)驅(qū)動矢量圖標樣式的開源圖標庫

4、Vue3常用插件

在之前的文章《10個提高開發(fā)效率的Vue3常用插件（快來收藏）》中，我們了解了10個有助于提高效率的vue插件：

• vue-multiselect-next：Vue的通用選擇/多選/標記組件

• vue-print-nb：指令包裝器

• vue-i18n-next：Vue3的國際化插件

• vue-cropper：vue圖片裁剪插件

• Vue Grid Layout：Vue的網(wǎng)格布局系統(tǒng)

• Vue Qrcode Reader：一組用于檢測和解碼QR(二維碼)碼的Vue.js組件

• Makeit Captcha：滑塊驗證碼插件

• vue3-clipboard：基于Vue3的粘貼復(fù)制插件

• vue.draggable 基于Sortable.js的Vue 3拖放組件

• BetterScroll解決移動端（已支持 PC）各種滾動場景需求的插件

5、Vue3相關(guān)生態(tài)

在之前的文章《6個實用的Vue3相關(guān)生態(tài)（總結(jié)分享）》中，我們了解了6個Vue3相關(guān)生態(tài)：

• Vue插件庫（vue365.cn）

• Pinia：輕量級狀態(tài)管理庫

• Nuxt Modules

• Nuxt 3：可用來創(chuàng)建服務(wù)端渲染 (SSR) 應(yīng)用

• vuepress：Vue驅(qū)動的靜態(tài)網(wǎng)站生成器

• VueUse：基本 Vue 組合實用函數(shù)的集合

6、Vue3動畫插件

1）vue-starport

帶有動畫的跨路由共享組件

github地址：https://github.com/antfu/vue-starport/blob/main/README.zh-Hans.md

演示地址：https://vue-starport.netlify.app/

前端（vue）入門到精通課程：進入學(xué)習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點擊使用

2）@vueuse/motion

Vue Composables 讓你的組件動起來

官方地址：https://motion.vueuse.org/

github地址：https://github.com/vueuse/motion

7、音視頻組件

@vueuse/sound

用于播放音效的 Vue 組合

官方地址：https://sound.vueuse.org/

github地址：https://github.com/VueUse/sound

【相關(guān)視頻教程推薦：vuejs入門教程、web前端入門】

聲明：本文內(nèi)容由網(wǎng)友自發(fā)貢獻，版權(quán)歸原作者所有，本站不承擔相應(yīng)法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請聯(lián)系admin@php.cn核實處理。

程序員必備接口測試調(diào)試工具：點擊使用

Apipost = Postman + Swagger + Mock + Jmeter

Api設(shè)計、調(diào)試、文檔、自動化測試工具

后端、前端、測試，同時在線協(xié)作，內(nèi)容實時同步

推薦：生活服務(wù)API、金融科技API、企業(yè)工商API、等相關(guān)的API接口服務(wù)：免費使用