vuetify 是当前 vue 3 主流 ui 框架首选，已完整支持 vue 3 并持续迭代 material design 3；其表单组件原生支持 v-model 和声明式 :rules 校验，主题通过 js 配置而非 css 变量，响应式需主动使用 v-row/v-col 和 usedisplay()，且 v-app 为必需根容器。
Bootstrap-Vue 已停更，Vuetify 是当前 Vue 3 主流选择
Bootstrap-Vue 官方在 2023 年底正式停止维护（bootstrap-vue 不再支持 Vue 3），其替代方案 bootstrap-vue-3 社区活跃度低、文档残缺、组件覆盖不全。而 Vuetify 已完整支持 Vue 3（vuetify@3.x），且持续迭代 Material Design 3 规范，是目前企业级 Vue 项目中事实上的 UI 框架首选。
用 Vuetify 写表单时，v-model 和 :rules 配合比 Bootstrap 类库更自然
Bootstrap 风格的 Vue 组件（如 b-form-input）往往需要手动绑定 @input + :value 实现双向绑定，验证逻辑也得自己封装；Vuetify 的 v-text-field、v-select 等原生支持 v-model 和声明式校验规则：
<v-text-field v-model="email" :rules="[v => !!v || '邮箱不能为空', v => /.+@.+\..+/.test(v) || '邮箱格式不正确']"></v-text-field>
- 规则函数直接内联，无需额外定义
methods或computed -
:rules数组为空时自动禁用校验，适合动态开关场景 - 错误提示自动挂载到组件下方，无需手动写
<small class="text-danger"></small>
Vuetify 的主题定制靠 definePreset，不是改 CSS 变量
很多人误以为改 _variables.scss 就能换主题——那是 Bootstrap 的路子。Vuetify 3 使用运行时主题系统，核心是 createVuetify 中的 theme 配置：
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi'
export default createVuetify({
icons: {
defaultSet: 'mdi',
aliases,
},
theme: {
defaultTheme: 'myCustomTheme',
themes: {
myCustomTheme: {
dark: false,
colors: {
primary: '#1976D2',
secondary: '#424242',
error: '#E53935',
}
}
}
}
})
- 所有颜色、断点、密度等都通过 JS 对象配置，CSS-in-JS 机制保证样式隔离
- 切换暗色模式只需调用
vuetify.theme.global.name.value = 'dark' - 若强行覆盖
.v-btn类名样式，大概率被 scoped CSS 或 vuetify 内部样式优先级压制
移动端适配别指望“自动”，Vuetify 的 breakpoints 得主动用
Vuetify 提供了 useDisplay() 组合式 API 和 md-and-down 等响应式类，但不会像 Bootstrap 那样“默认堆满栅格”。常见错误是直接写 <v-col cols="12" md="6"></v-col> 却忘了父容器必须是 <v-row></v-row>：
<v-row><v-col cols="12" sm="6" md="4">...</v-col><v-col cols="12" sm="6" md="4">...</v-col></v-row>
-
v-row默认触发 flex 布局，v-col的cols才生效；单独用v-col会被当普通 div 渲染 - 移动端折叠菜单需配合
v-navigation-drawer的temporary+mobile-break-point属性，不是加个hidden-md-and-up就完事 - 真机调试时发现按钮错位？先检查是否漏了
v-app根容器——它负责注入全局 CSS 变量和断点监听器
v-table 不提供自定义 <tr> 渲染函数，就是强制你用 <code>item 插槽来保持行高一致。这不是限制，是避免你掉进像素对齐的坑里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
