【吐血整理】40+ Vue3 實用工具分享

Vue3正式發布已經快2年了，今年2月也正式變成 Vue 專案的預設版本。以下這篇文章就整理總結了40個Vue3 實用工具、UI庫、插件、生態分享給大家，希望對大家有幫助。

1、Vue3 UI元件庫

#UI元件庫是可以理解為是重複使用的介面設計元素的集合體，它是一個文件庫。 UI元件庫在整個系統中扮演的是行為層面的對接，是團隊內部設計師和開發間的橫向協作，也是確保產品輸出一致的規格基礎。 （學習影片分享：vue影片教學）

這裡整理了17個Vue3 UI元件庫，包含13個Web UI庫和4個行動UI庫，閱讀文章《 17個Vue3實用UI元件庫（Web 移動）分享”即可取得。

Web UI庫

• ElementUI Plus：設計師與開發者的元件庫

• Ant Design of Vue：Ant Design 的Vue 實現，開發和服務企業級後台產品

• BalmUI：基於Google的Material Design設計的UI 元件庫

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

• arco.design：位元組跳動企業級產品設計系統，支援React和Vue雙重版本

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

• 。 。 。

行動UI庫

• Vant：行動裝置元件庫

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

• Varlet：Material 風格行動裝置元件庫

• nutui-bingo：京東基於NutUI 的抽獎元件庫

2、Vue3實用開發工具

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

• unplugin-vue-components：按需元件自動匯入外掛程式

• vuex-persistedstate：Vuex持久化外掛程式

##vuex-persist：支援Typescript 的Vuex持久化外掛程式
@vueuse/gesture：手勢庫，使應用程式具有互動性
unplugin-auto-import
#pinia-plugin-persistedstate：Pinia 資料持久化儲存
vue-termui.dev：一個基於Vue.js 的終端UI 框架

#3、Vue3視覺化工具在科技的頻頻更新下，視覺化開發工具成為了提升開發效率的有效工具。在先前的文章《

【整理總結】4個Vue3視覺化工具

》中，我們介紹了4個Vue3視覺化工具：

Pdfvuer：用於Vue應用中的一個PDF檢視器
vue3-marquee：無縫捲動組件

• ##Vue-ECharts：百度ECharts 的 Vue.js 元件

• iconpark：一個透過技術驅動向量圖示樣式的開源圖示庫

#4、Vue3常用外掛程式

在先前的文章《10個提高開發效率的Vue3常用插件（快來收藏）

》中，我們了解了10個有助於提高效率的vue插件：

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

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

• vue-i18n-next：Vue3的國際化外掛程式

• ##vue-cropper：vue圖片裁切外掛

• #Vue Grid Layout：Vue的網格佈局系統

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

• Makeit Captcha：滑桿驗證碼外掛程式

• vue3-clipboard：基於Vue3的貼上複製外掛

• vue.draggable 基於Sortable.js的Vue 3拖放元件

• BetterScroll解決行動裝置（支援 PC）各種捲動場景需求的外掛程式

5、Vue3相關生態

#在先前的文章《6個實用的Vue3相關生態（總結分享）》中，我們了解了6個Vue3相關生態：

Vue外掛程式庫（vue365.cn）

• Pinia：輕量層級狀態管理庫

• Nuxt Modules

• #Nuxt 3：可用於建立服務端渲染 (SSR) 應用程式

• #vuepress：Vue驅動的靜態網站產生器

• VueUse：基本Vue 組合實用函數的集合

6、Vue3動畫外掛

#1）vue-starport

有動畫的跨路由共用元件

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

示範網址：https://vue-starport.netlify.app/

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################【相關影片教學推薦：###vuejs入門教學###、###web前端入門###】###