1.Material Design讲解

Material Design 是由谷歌推出的一套设计语言，旨在帮助开发团队快速构建高质量的数字化体验。它是一个可适配的系统，提供了丰富的设计原则、组件和样式指南，并且有开源代码支持。

Material Design 的核心目标是通过一致的视觉语言和交互模式，提升用户体验，同时加速产品开发过程。它适用于各种平台，包括移动端、桌面端和网页应用。

以下是 Material Design 的主要特点：

• 设计基础：提供了关于布局、颜色、排版等方面的详细指南，确保设计的一致性和美观性。

• 组件库：包含按钮、卡片、导航栏等常用 UI 组件，方便开发者直接使用。

• 开源支持：提供开源代码，开发者可以快速集成到自己的项目中。

• 响应式设计：支持多种屏幕尺寸和设备，确保跨平台的良好表现。

上图所示可见Material Design中按键设计感非常强，界面简洁美观，我个人是非常喜欢这种设计的。

2.vue接入Material Design

下面我来讲解如何在vue中接入Material Design

2.1创建 / 进入你的 Vue3 项目

# 如果你还没项目
npm create vite@latest my-vuetify-app -- --template vue
cd my-vuetify-app
npm install

2.2导入vuetify

npm install vuetify

2.3在 main.js 中配置

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 引入 Vuetify
import { createVuetify } from 'vuetify'
import 'vuetify/styles' // 核心样式
import '@mdi/font/css/materialdesignicons.css' // 图标（MD 官方图标）

const vuetify = createVuetify()

createApp(App)
  .use(vuetify) // 挂载
  .mount('#app')

2.4安装图标库

npm install @mdi/font

2.5测试使用 MD 组件（App.vue）

直接替换 App.vue，马上看到 Material Design 效果：

<template>
  <v-app> <!-- MD 必须根容器 -->
    <v-container class="text-center pa-6">
      <h1 class="mb-4">Vue + Material Design</h1>

      <!-- MD 按钮 -->
      <v-btn color="primary" size="large" class="me-2">
        主要按钮
      </v-btn>
      <v-btn color="secondary" size="large">
        次要按钮
      </v-btn>

      <!-- MD 卡片 -->
      <v-card class="mx-auto mt-5" max-width="400">
        <v-card-title>Material Design 卡片</v-card-title>
        <v-card-text>
          这是谷歌质感设计风格的卡片组件
        </v-card-text>
        <v-card-actions>
          <v-btn color="info">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-container>
  </v-app>
</template>

现在我们基本环境已经配置好了，接下来我们只需要交给ai，让他通过Vue 接入 Material Design来设计页面。