首頁 > 頭條 > 【吐血整理】40+ Vue3 實用工具分享

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

青灯夜游
發布: 2022-10-20 13:44:20
原創
3054 人瀏覽過

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動畫外掛

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

#1)vue-starport

有動畫的跨路由共用元件

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

【吐血整理】40+ Vue3 實用工具分享示範網址:https://vue-starport.netlify.app/

2)@vueuse/motion

Vue Composables 讓你的元件動起來

#官方網址:https://motion.vueuse.org/

github網址:https://github.com/vueuse/motion

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

#7、影音元件

@vueuse/sound

######用於播放音效的Vue 組合######官方網址:https://sound.vueuse.org/######github網址:https://github.com/VueUse/sound################【相關影片教學推薦:###vuejs入門教學###、###web前端入門###】###
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板