Vuetify是一個基于Material Design設計規范的Vue.js UI組件庫，它提供了80多個精心設計的組件，幫助開發者快速構建美觀且功能豐富的企業級應用。
核心特性
1. 完整的Material Design實現
// 所有組件遵循Material Design規范
<v-btn color="primary">按鈕</v-btn>
<v-card elevation="2">卡片</v-card>
<v-text-field label="輸入框"></v-text-field>2. 響應式設計
Vuetify內置了強大的柵格系統，基于12列布局：
<v-row><v-col cols="12" md="6" lg="4"><!-- 內容自適應不同屏幕尺寸 --></v-col>
</v-row>3. 主題定制化
支持動態主題切換和深度定制：
// vuetify.js配置
export default createVuetify({theme: {defaultTheme: 'light',themes: {light: {colors: {primary: '#1867C0',secondary: '#5CBBF6',}}}}
})4. 無障礙支持
所有組件都遵循WAI-ARIA標準，確保殘障用戶也能正常使用。
安裝與配置
快速安裝
vue add vuetify
# 或
npm install vuetify@^3.0.0基本配置
// main.js
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'const vuetify = createVuetify({components,directives,
})createApp(App).use(vuetify).mount('#app')常用組件詳解
布局組件
<v-app><v-app-bar app>應用欄</v-app-bar><v-navigation-drawer app>導航抽屜</v-navigation-drawer><v-main>主內容區</v-main><v-footer app>頁腳</v-footer>
</v-app>表單組件
<v-form v-model="valid"><v-text-field v-model="email" :rules="emailRules" label="郵箱"/><v-select v-model="select" :items="items" label="選擇項"/><v-checkbox v-model="checkbox" label="同意協議"/><v-btn :disabled="!valid">提交</v-btn>
</v-form>數據展示組件
<v-data-table:headers="headers":items="items":items-per-page="5"class="elevation-1"
></v-data-table>主題定制案例
自定義主題色
// variables.scss
$primary: #1867C0;
$secondary: #5CBBF6;
$accent: #005CAF;組件樣式覆蓋
.v-btn {border-radius: 8px;text-transform: none;font-weight: 600;
}最佳實踐
1. 按需引入減小體積
// 只引入使用的組件
import { VBtn, VCard, VDialog } from 'vuetify/components'2. 使用Utility Classes
<div class="d-flex align-center justify-space-between"><span class="text-h6 font-weight-bold">標題</span><v-btn class="ml-4">操作</v-btn>
</div>3. 響應式設計實踐
<v-row><v-col cols="12" sm="6" md="4" lg="3"><v-card class="pa-4"><div class="text-h6">響應式卡片</div></v-card></v-col>
</v-row>性能優化
1. 組件懶加載
const VDialog = defineAsyncComponent(() =>import('vuetify/components/VDialog')
)2. Tree Shaking配置
// vite.config.js
export default {optimizeDeps: {include: ['vuetify'],}
}常見問題解決
1. 樣式沖突
// 使用深度選擇器
:deep(.v-btn) {background: red !important;
}2. 自定義圖標庫集成
import { aliases, mdi } from 'vuetify/iconsets/mdi'
import '@mdi/font/css/materialdesignicons.css'const vuetify = createVuetify({icons: {defaultSet: 'mdi',aliases,sets: { mdi }}
})
)
_282)
