2021，17個 最流行的 Vue 外掛

前端小智發表於2022-01-20
Vue
作者： John Lim
譯者：前端小智
來源：vuemastery
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

Vue 被一個健康的外掛和包的生態系統所加強，使開發變得可靠、快速和簡單。由於Vue 是一個國際開發者社群所選擇的框架，所以有一個不斷增長的外掛和包庫，你可以在專案中使用。本文列舉了用於Vue 2和Vue 3的 15個 流行的 Vue 外掛。

  • Vuetify
  • NuxtJS
  • Vuex
  • Vuex Persisted State
  • VuePress
  • Vue Meta
  • Vue ChartJS
  • Vue Grid Layout
  • Vue Draggable
  • Vee-Validate
  • Vue Toastification
  • Vue Tour
  • Swiper.js
  • Vue2-Leaflet
  • TroisJS
  • Vue Scrollama
  • Vue QR Code Reader

Vuetify

image.png

教程：https://www.vuemastery.com/co...

你是否曾糾結於如何讓應用在視覺上看起來更吸引人?Vuetify是一個基於Material Design的UI庫，支援谷歌和Android的設計語言。

它是一個開源庫，有數百個元件，從按鈕， app bars，chips，modals 和更多。這些元件都是預先設計好的，非常實用，讓你能夠通過文件化的 props 和插槽與它們進行互動。預先定義的CSS類也可用於控制顏色、字型、網格間距、彈性框等。

NuxtJS

image.png

Nuxt 基於一個強大的模組化架構。你可以從 50 多個模組中進行選擇，讓你的開發變得更快、更簡單。對 PWA 的支援、新增谷歌分析到你的網頁或生成網站地圖，這些功能都無需重新發明輪子來獲得。

NuxtJS目前基於Vue 2。但是nux3最近已經發布，並且已經完全重寫以支援Vue 3。

Vuex

image.png

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也整合到 Vue 的官方除錯工具 devtools extension (opens new window)，提供了諸如零配置的 time-travel 除錯、狀態快照匯入匯出等高階除錯功能。

Vuex Persisted State

image.png

Vuex狀態機制，一重新整理就會重置，解決問題的方式一般都是儲存起來(session/local Storage)，vuex-persistedstate外掛幫我們整合了這些功能。

VuePress

image.png

VuePress 是一款使用 Vue 驅動的靜態網站生成器，是 Vue 的作者 Evan You 為了方便文件的編寫而開發的。

  • 預設主題與 Vue 官方文件一致
  • 簡潔，少配置，高效能
  • Markdown 專為技術文件提供擴充
  • 自帶 PWA
  • 自定義主題，可定製程度完全由自己決定

Vue Meta

image.png

地址：https://vue-meta.nuxtjs.org/

基於Vue 2.0 的 vue-meta 外掛，主要用於管理HMTL頭部標籤，同時也支援SSR。

vue-meta有以下特點：

  • 在元件內設定 metaInfo，便可輕鬆實現頭部標籤的管理
  • metaInfo 的資料都是響應的，如果資料變化，頭部資訊會自動更新
    支援 SSR

image.png

Vue ChartJS

image.png

地址：https://www.npmjs.com/package...

想在你的Vue應用程式中新增圖表？可以看看 Chart.js。它是一個為設計師和開發者提供的簡單而靈活的 JS 圖表庫。它有許多漂亮的圖表型別可供選擇。

地址：https://jbaysolutions.github....

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

特性

  • 可拖拽
  • 可調整大小
  • 靜態部件（不可拖拽、調整大小）
  • 拖拽和調整大小時進行邊界檢查
  • 增減部件時避免重建柵格
  • 可序列化和還原的佈局
  • 自動化 RTL 支援
  • 響應式

Vue Draggable

地址：https://www.npmjs.com/package...

Vue.Draggable 是一款基於 Sortable.js 實現的vue拖拽外掛。支援移動裝置、拖拽和選擇文字、智慧滾動，可以在不同列表間拖拽、不依賴 jQuery 為基礎、vue2 過渡動畫相容、支援撤銷操作，總之是一款非常優秀的vue拖拽元件。

Vee-Validate

image.png

地址：https://www.npmjs.com/package...

為了確保通過表單從使用者那裡收集正確型別的資料，有必要驗證表單，以確保使用者輸入符合預期的模式。VeeValidate是一個可以將這一層功能新增到任何表單元件的包。

Vue Toastification

地址：https://vue-toastification.ma...

Vue Toastification 是一個輕量、易用且美觀的提示條通知元件，提供了大量的選項來支援大部分自定義選擇。

Vue Tour

地址：https://github.com/pulsardev/...

Vue Tour是輕巧、簡單且可自定義的新手指引外掛，可與Vue.js一起使用。它提供了一種快速簡便的方法來指導使用者使用您的應用程式。

Swiper.js

地址：https://swiperjs.com/vue

Swiper.js是一個預製的旋轉木馬元件，可以用來在各種圖片之間滑動。Swiper.js 原生支援Vue 3，提供了一個可以插入到你的專案的元件。對於Vue 2，你可以使用其他包，如vue-awesome-swiper。

vue2-leaflet

地址：https://www.npmjs.com/package...

image.png

vue2-leaflet是對ledflet的封裝，vue專案中直接使用vue2-leaflet即可。Leaflet.js 是一個開源庫，使用它可以部署互動式，簡單，輕量級和簡單的Web地圖。

TroisJS

地址：https://troisjs.github.io/

Trois（法語為Three）是一個Vue 3庫，用於Three.JS，這是一個流行的WebGL庫。

Three.JS對桌面和移動端都有良好的支援。這個庫允許你使用VueJS元件為你的網站輕鬆建立3D內容。你可以使用這個庫在你的網站上新增一個3D渲染器，並在你的VueJs檔案的<template>部分中使用預先建立的元件指定場景細節，如材料、照明、網格、陰影等。

Trois.Js 是Three.js上面的一個包裝器，因此不比原始庫慢。它還通過自動處置幾何體、材料、紋理、渲染器等來簡化物件的處置，這在原始庫中是不存在的。

vue-scrollama

地址：https://www.npmjs.com/package...

一個Vue元件，可輕鬆設定滾動驅動的互動（又稱滾動講演）。 在引擎蓋下使用 Scrollama。

Vue QR Code Reader

image.png

地址：https://gruhn.github.io/vue-q...

QR碼(QR code)在當今世界非常普遍。Vue二維碼閱讀器是一個即插即用的包，允許你新增二維碼掃描功能到你的應用程式。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

https://www.vuemastery.com/bl...

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章