vue 常用的 UI 组件库之一：Vuetify组件库

Vuetify 是一个 Vue.js 2 的开源库，它提供了 material design 组件的设计资源，用于快速构建应用程序。

以下是一些使用 Vuetify 的常见组件的示例代码：

1. 按钮（Button）

<template>
  <v-btn color="success">Click Me</v-btn>
</template>
 
<script>
export default {
  //
}
</script>

2. 卡片（Card）

<template>
  <v-card>
    <v-card-title class="headline">
      Welcome to Vuetify
    </v-card-title>
    <v-card-text>
      <div>I'm a card. I am nice and simple. I am the most popular card in the world. I am very convenient to use because I require little to no configuration.</div>
    </v-card-text>
    <v-card-actions>
      <v-btn color="primary" text>Read More</v-btn>
    </v-card-actions>
  </v-card>
</template>
 
<script>
export default {
  //
}
</script>

3. 导航栏（Navbar）

<template>
  <v-app-bar>
    <v-toolbar-title>My App</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-btn icon>
      <v-icon>mdi-export</v-icon>
    </v-btn>
    <v-btn icon>
      <v-icon>mdi-delete</v-icon>
    </v-btn>
  </v-app-bar>
</template>
 
<script>
export default {
  //
}
</script>

4. 列表（List）

<template>
  <v-list>
    <v-list-item-group color="primary">
      <v-list-item v-for="(item, index) in items" :key="index">
        <v-list-item-icon>
          <v-icon>{{ item.icon }}</v-icon>
        </v-list-item-icon>
        <v-list-item-content>
          <v-list-item-title>{{ item.text }}</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list-item-group>
  </v-list>
</template>
 
<script>
export default {
  data: () => ({
    items: [
      { icon: 'mdi-home', text: 'Home' },
      { icon: 'mdi-email', text: 'Email' },
      { icon: 'mdi-calendar', text: 'Calendar' },
      { icon: 'mdi-delete', text: 'Trash' },
      { icon: 'mdi-alert', text: 'Alerts' },
    ],
  }),
};
</script>

5. 对话框（Dialog）

<template>
  <v-dialog v-model="dialog" max-width="290">
    <template v-slot:activator="{ on }">
      <v-btn color="red" dark v-on="on">Open Dialog</v-btn>
    </template>
    <v-card>
      <v-card-title class="headline">Use Google's location service?</v-card-title>
      <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</