编辑“︁Vuetify入门”︁

= Vuetify入门 =

Vuetify 是一个基于 [[Vue.js]] 的开源 UI 组件库，遵循 [[Material Design]] 规范，提供丰富的预构建组件，帮助开发者快速构建美观且功能完善的 Web 应用。它专为 Vue.js 设计，简化了响应式布局、主题定制和交互式组件的开发流程。

== 简介 ==
Vuetify 的核心目标是提供一套符合 Material Design 标准的 Vue 组件，同时保持高度的可定制性。它支持 Vue 3（通过 Vuetify 3+）并向后兼容 Vue 2（Vuetify 2）。主要特性包括：
* **预设主题**：内置亮色/暗色主题，支持动态切换。
* **响应式网格**：基于 [[Flexbox]] 的布局系统。
* **无障碍支持**：遵循 [[WAI-ARIA]] 标准。
* **国际化**：内置多语言支持。

== 安装与配置 ==
=== 通过 npm/yarn 安装 ===
<syntaxhighlight lang="bash">
# 对于 Vue 3 项目
npm install vuetify@^3
# 或
yarn add vuetify@^3
</syntaxhighlight>

=== 基础配置 ===
在 Vue 应用的入口文件（如 `main.js`）中初始化：
<syntaxhighlight lang="javascript">
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const app = createApp(App)
const vuetify = createVuetify()

app.use(vuetify)
app.mount('#app')
</syntaxhighlight>

== 核心概念 ==
=== 1. 布局系统 ===
使用 `<v-container>`, `<v-row>`, `<v-col>` 构建响应式网格：
<syntaxhighlight lang="html">
<template>
  <v-container>
    <v-row>
      <v-col cols="12" sm="6">左侧内容</v-col>
      <v-col cols="12" sm="6">右侧内容</v-col>
    </v-row>
  </v-container>
</template>
</syntaxhighlight>

=== 2. 组件示例：按钮 ===
Material Design 风格的按钮：
<syntaxhighlight lang="html">
<template>
  <v-btn color="primary" variant="tonal">点击我</v-btn>
</template>
</syntaxhighlight>

=== 3. 主题定制 ===
在 `createVuetify` 中定义主题：
<syntaxhighlight lang="javascript">
const vuetify = createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary: '#1867C0',
          secondary: '#5CBBF6',
        }
      }
    }
  }
})
</syntaxhighlight>

== 实际案例 ==
=== 用户登录表单 ===
<syntaxhighlight lang="html">
<template>
  <v-card width="400" class="mx-auto mt-5">
    <v-card-title>登录</v-card-title>
    <v-card-text>
      <v-text-field label="用户名" v-model="username"/>
      <v-text-field label="密码" type="password" v-model="password"/>
    </v-card-text>
    <v-card-actions>
      <v-btn color="primary" @click="login">登录</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup>
import { ref } from 'vue'
const username = ref('')
const password = ref('')
const login = () => console.log('登录尝试:', username.value)
</script>
</syntaxhighlight>

== 进阶特性 ==
=== 动态主题切换 ===
使用 `useTheme` 组合式 API：
<syntaxhighlight lang="javascript">
import { useTheme } from 'vuetify'

const theme = useTheme()
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
</syntaxhighlight>

=== 自定义组件变体 ===
通过 `defineVariant` 扩展按钮样式：
<syntaxhighlight lang="javascript">
const vuetify = createVuetify({
  components: {
    VBtn: {
      variants: [
        {
          props: { variant: 'glow' },
          style: {
            boxShadow: '0 0 10px 2px var(--v-primary-base)'
          }
        }
      ]
    }
  }
})
</syntaxhighlight>

== 性能优化 ==
Vuetify 3 采用按需导入策略，推荐使用 `unplugin-vuetify` 进行 tree-shaking：
<syntaxhighlight lang="javascript">
// vite.config.js
import vuetify from 'unplugin-vuetify/vite'

export default defineConfig({
  plugins: [vuetify()]
})
</syntaxhighlight>

== 常见问题 ==
{| class="wikitable"
|-
! 问题 !! 解决方案
|-
| 样式不生效 || 确保已导入 `vuetify/styles`
|-
| 图标不显示 || 安装 `@mdi/font` 或配置图标库
|-
| 响应式失效 || 检查 `<v-container>` 是否作为根布局
|}

== 学习路径 ==
<mermaid>
graph LR
A[Vue.js 基础] --> B[Vuetify 安装]
B --> C[布局系统]
C --> D[组件使用]
D --> E[主题定制]
E --> F[高级模式]
</mermaid>

== 数学支持示例 ==
Vuetify 的间距系统基于 8px 基准单位，计算公式：
<math>spacing = n \times 8\text{px}</math>
其中 `n` 为整数（如 `m-2` 表示 16px 外边距）。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js生态系统]]