用途:面向编写、调试或配置导入 vuetify v4.x 代码的场景,基于 vuetify@4.0.1 的 Vue 3 Material Design 组件框架。
环境限制:需要 Vue ^3.5.0 作为 peer 依赖,不支持 Vue 2(Vuetify 2 已 EOL)。仅 ESM("type": "module")。可选 peer 包括 vite-plugin-vuetify >=2.1.0、webpack-plugin-vuetify >=3.1.0、typescript >=4.7。面向现代浏览器,Safari 13+ 需 polyfill,最小设计宽度 320px。默认字体 Roboto 需自行添加,如 @fontsource/roboto。
初始化:推荐 Vite 自动 treeshaking,vuetify 插件须放在 vue 插件之后。src/plugins/vuetify.js 中导入 'vuetify/styles' 并调用 createVuetify()。无 loader 插件时需手动注册 components 与 directives,通配导入会拖慢开发构建。createVuetify 接受 aliases、blueprint、components、date、defaults、directives、display、goTo、icons、locale、ssr、theme 等选项,返回 install、unmount、defaults、display、theme、icons、locale、date、goTo。用 app.use(vuetify) 安装,并用单个 <v-app> 包裹应用。SSR 框架(Nuxt、vite-ssr)需设 ssr: true。脚手架命令:pnpm create vuetify / npm create vuetify@latest。CDN 全量包为 vuetify/dist/vuetify.js。
组件:优先从 vuetify/components/<Group> 导入而非 vuetify/components。Labs 组件非生产就绪,从 vuetify/labs/<Name> 或 vuetify/labs/components 导入;4.0.1 的 labs 含 VAvatarGroup、VColorInput、VCommandPalette、VDateInput、VFileUpload、VIconBtn、VMaskInput、VPicker、VPie、VStepperVertical、VPullToRefresh、VVideo。动态 <component :is> 对 loader 插件不可见,需手动导入。
配置:v4 默认主题为 system(跟随 prefers-color-scheme),可用 theme: { defaultTheme: 'light' } 固定。defaults 可按组件设默认 prop,class 与 style 仅用于组件键。断点默认 sm 600、md 840、lg 1145、xl 1545、xxl 2138。图标默认 mdi,需 @mdi/font 样式表,或用 mdi-svg。日期默认适配器包装原生 Date。blueprint 可应用设计系统预设。
组合式函数:从 vuetify 入口导出 useDate、useDefaults、useDisplay、useGoTo、useLayout、useLocale、useRtl、useTheme、useHotkey、useMask。热键建议用 cmd 修饰符。
样式:'vuetify/styles' 为全量预编译 CSS;模块化入口为 vuetify/styles/core(须最先)、vuetify/styles/colors、vuetify/styles/utilities。SASS 变量覆盖需 sass 预处理器与 loader 插件配置。v4 样式使用级联层,未分层的用户 CSS 会覆盖 Vuetify。
v3 迁移要点:网格改用 CSS gap,dense 改为 density="compact";排版变体重命名;elevation 从 0-24 缩减为 0-5;VSelect/VCombobox/VAutocomplete 的 item 插槽改名为 internalItem;VForm 插槽值不再为 ref;defaults 合并跳过 undefined,用 null 覆盖全局默认。
常见问题:缺少图标字体会显示空白图标;缺少 Roboto 会回退字体;自定义 CSS 后样式异常需检查层顺序;VNumberInput 内部用 toFixed(),任意精度小数应改用 v-text-field 配合 decimal.js;不要在 SASS 文件中使用 vuetify/styles。
参考文件包括 exports.md、configuration.md、composables.md、styling.md、migration-v4.md,官方文档为 https://vuetifyjs.com。