【吐血整理】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：基于谷歌的 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/

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

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前端入門】

聲明：本文內容由網友自發貢獻，版權歸原作者所有，本站不承擔相應法律責任。如您發現有涉嫌抄襲侵權的內容，請聯系admin@php.cn核實處理。

程序員必備接口測試調試工具：點擊使用

Apipost = Postman + Swagger + Mock + Jmeter

Api設計、調試、文檔、自動化測試工具

后端、前端、測試，同時在線協作，內容實時同步

推薦：生活服務API、金融科技API、企業工商API、等相關的API接口服務：免費使用