用途:该技能面向 Vue.js 项目,指导使用 Vuetify 3 这一 Material Design 库实现 Material Design 3(M3)风格界面,包含动态色彩主题、M3 对齐组件、设计令牌与无障碍支持。适用场景为 Vue.js 项目、需要企业级 M3 且文档完善、以及需要大型且维护良好的 Vue 组件库时。
主要能力:主题设置(明暗两套主题与 M3 颜色令牌)、组件使用(按钮、卡片、文本框、导航、对话框等)、动态色彩与设计令牌、无障碍。
使用方式:安装命令为 npm install vuetify。主题在 plugins/vuetify.js 中通过 createVuetify 配置,导入 'vuetify/styles',设置 defaultTheme 与 themes 的 light、dark 颜色(如 primary、secondary、surface-variant、error、background、surface)。组件通过 color、variant、rounded 等属性控制样式,例如按钮的 filled、outlined、text、tonal、elevated 变体,卡片使用 elevation 与 rounded,文本框使用 outlined 或 filled 变体,导航使用 v-bottom-navigation、v-navigation-drawer 与 v-list,对话框使用 v-dialog 配合 v-card。
检查清单:Vuetify 插件已配置 M3 颜色令牌;已定义明暗两套主题;组件使用 Vuetify 的 color、variant、rounded 属性;排版继承 Vuetify 类型系统;导航组件使用正确的 M3 模式。
限制:资料未提供版本兼容性、性能、浏览器支持、收费或价格等信息,暂未提供。