10個提高開發效率的Vue3常用插件（快來收藏）

這篇文章為大家總結分享幾個好用的 Vue 插件，可以幫助開發者提高開發效率、解決移動端各種滾動場景需求，希望對大家有所幫助！

1、vue-multiselect-next

#Vue.js 的通用選擇/多選/標記元件

#項目與文件位址：https://vue-multiselect.js.org/

有關Vue 3的安裝，請參閱Github中的自述文件以取得最新說明。 （學習影片分享：vuejs教學）

2、vue-print-nb

用於印刷、簡單、快速、方便、輕巧的指令包裝器

Github位址：https://github.com/Power-kxLee/vue-print-nb

線上DEMO：https://power-kxlee.github.io/vue-print-nb/dist/index.html

3、vue-i18n-next（Vue3的國際化插件）

i18n是市面上比較成熟的國際化庫，而vue-i18n是一個Vue.js國際化的插件，就是在vue應用中嵌入語言切換功能,可以切換已匯入專案中的各個語系。

vue-i18n-nex是Vue i18n 9用於Vue 3的外掛程式庫。

官方網址：https://vue-i18n.intlify.dev/

4、vue-cropper

簡單的vue圖片裁切外掛

專案位址：https://github.com/xyxiao001/vue-cropper

示範網址：http ://github.xyxiao.cn/vue-cropper/example/

#5、Vue Grid Layout

#Vue.js 的網格佈局系統

中文官網：https://jbaysolutions.github.io/vue-grid-layout/zh/

Vue Grid Layout是一個類似Gridster的柵格佈局系統，適用於Vue.js，靈感來自React Grid Layout。

特性：

• 可拖曳

• #可調整大小

• 靜態部件（不可拖曳、調整大小）

• 拖曳和調整大小時進行邊界檢查

• 增減部件時避免重建柵格

• 可序列化與還原的佈局

• #自動化RTL 支援

• ## 反應式

6、Vue Qrcode Reader

一個Vue.js元件，允許在不離開瀏覽器的情況下偵測和解碼二維碼

官網：https://gruhn.github.io/vue-qrcode-reader/

##Vue QRcode Reader是一組用於偵測和解碼QR(二維碼)碼的Vue.js元件。它使你無需離開瀏覽器即可檢測和解碼QR碼，所有元件都具有響應能力。除此之外，它接近零樣式，因此你可以使它們適合你的佈局。使用方法簡單明了。

7、Makeit Captcha基於 Vue3   Vite   Canvas 開發的滑桿驗證碼，動態產生驗證滑桿，結合後端的二次校驗，能有效的避免被抓取模擬驗證。

滑桿驗證碼元件常用於各種表單提交前的驗證。

官方網址：https://admin.makeit.vip/components/captcha

• Github：https://github.com/lirongtong/miitvip-captcha

  Npm：https://www.npmjs.com/package/makeit-captcha

8 、vue3-clipboardVue 3 的 

clipboard.js

 ，一個基於Vue 3的貼上複製插件，不依賴Flash或其他框架。 Github：https://github.com/soerenmartius/vue3-clipboard

9、vue.draggable

#基於Sortable.js的Vue 3拖曳元件

#官方網址：https://sortablejs.github.io/vue.draggable.next/#/simple

github位址：https://github.com/SortableJS/Vue.Draggable

#特性

• 支援觸控裝置

• 支援拖曳並選擇文本

• 支援智慧捲動

• 支援不同清單之間的拖曳

• 不以jQuery為基礎

• 和視圖模型同步刷新

• #和vue2的國度動畫相容

• 支持撤銷操作

• 當需要完全控制時，可以拋出所有變更

• 可以和現有的UI元件相容

#10、BetterScroll

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

官方網址：https://better-scroll.github.io/docs/zh-CN/

##BetterScroll 是一款重點解決行動端（已支援PC）各種滾動場景需求的插件。它的核心是藉鏡的 iscroll (opens new window)的實現，它的 API 設計基本上相容 iscroll，在 iscroll 的基礎上又擴展了一些 feature 以及做了一些性能優化。

BetterScroll 是使用純 JavaScript 實作的，這意味著它是無依賴的。

注意：

• BetterScroll 2.X 裡面，我們將1.X 耦合的feature 拆分至插件，以達到按需加載、減少包體積的目的。因此，@better-scroll/core 只提供了最核心的滾動能力。如果想要實現上拉載入、下拉刷新的功能，你需要使用對應的插件。

• 版本 2.0.4 的 BetterScroll 可以透過 specifiedIndexAsContent 來指定 wrapper 的某個子元素為 content。

（學習影片分享：

web前端開發）

以上是10個提高開發效率的Vue3常用插件（快來收藏）的詳細內容。更多資訊請關注PHP中文網其他相關文章！