vuetifyjs

<template>
  <v-app>
    <v-container>
      <v-row>
        <v-col cols="12">
          <v-card>
            <v-card-title>Simple Vuetify Card</v-card-title>
            <v-card-text>This is a simple card component using Vuetify.</v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: 'VuetifyExample'
};
</script>

<style scoped>
/* Add custom styles if needed */
</style>

解释说明：

• <v-app>: 这是 Vuetify 应用程序的根组件，所有 Vuetify 组件都应该嵌套在这个组件内。
• <v-container>: 提供了一个响应式的布局容器，可以自动处理不同屏幕尺寸下的布局。
• <v-row> 和 <v-col>: 这些组件用于创建栅格系统，帮助你轻松地布局页面内容。cols="12" 表示该列占据整个宽度。
• <v-card>: 是一个卡片组件，通常用于展示信息或交互元素。它包含标题 (<v-card-title>) 和文本内容 (<v-card-text>)。

这段代码展示了如何使用 Vuetify 创建一个简单的卡片组件，并将其嵌入到应用程序中。