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

1、Vue3 UI組件庫(kù)

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

這里整理了17個(gè)Vue3 UI組件庫(kù)，包含13個(gè)Web UI庫(kù)和4個(gè) UI庫(kù)，閱讀文章《17個(gè)Vue3實(shí)用UI組件庫(kù)（Web+移動(dòng)）分享》即可獲取。

Web UI庫(kù)

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

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

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

• Naive UI：基于 Vue 3.0/TypeScript 的免費(fèi)開(kāi)源前端 UI 組件庫(kù)

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

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

• 。。。

移動(dòng)UI庫(kù)

• Vant：移動(dòng)端組件庫(kù)

• NutUI：京東風(fēng)格的輕量級(jí)移動(dòng)端 Vue 組件庫(kù)

• Varlet：Material 風(fēng)格移動(dòng)端組件庫(kù)

• nutui-bingo：京東基于 NutUI 的抽獎(jiǎng)組件庫(kù)

2、Vue3實(shí)用開(kāi)發(fā)工具

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

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

• vuex-persistedstate：Vuex持久化插件

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

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

• unplugin-auto-import

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

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

3、Vue3可視化工具

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

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

• vue3-marquee：無(wú)縫滾動(dòng)組件

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

• iconpark：一個(gè)通過(guò)技術(shù)驅(qū)動(dòng)矢量圖標(biāo)樣式的開(kāi)源圖標(biāo)庫(kù)

4、Vue3常用插件

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

• vue-multiselect-next：Vue的通用選擇/多選/標(biāo)記組件

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

• vue-i18n-next：Vue3的國(guó)際化插件

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

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

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

• Makeit Captcha：滑塊驗(yàn)證碼插件

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

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

• BetterScroll解決移動(dòng)端（已支持 PC）各種滾動(dòng)場(chǎng)景需求的插件

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

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

• Vue插件庫(kù)（vue365.cn）

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

• Nuxt Modules

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

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

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

6、Vue3動(dòng)畫(huà)插件

1）vue-starport

帶有動(dòng)畫(huà)的跨路由共享組件

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

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

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

2）@vueuse/motion

Vue Composables 讓你的組件動(dòng)起來(lái)

官方地址：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ā)貢獻(xiàn)，版權(quán)歸原作者所有，本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容，請(qǐng)聯(lián)系admin@php.cn核實(shí)處理。

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

Apipost = Postman + Swagger + Mock + Jmeter

Api設(shè)計(jì)、調(diào)試、文檔、自動(dòng)化測(cè)試工具

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

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