Vue Element Plus El-Card 组件

在Vue中使用Element Plus库的<el-card>组件，首先确保已经安装了Element Plus。

安装Element Plus:

npm install element-plus --save

接着在Vue组件中使用<el-card>：

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>卡片名称</span>
      </div>
    </template>
    <div v-for="o in 3" :key="o" class="text item">
      列表内容 {{ o }}
    </div>
  </el-card>
</template>
 
<script>
import { ElCard } from 'element-plus';
export default {
  components: {
    ElCard
  }
};
</script>
 
<style>
.text {
  font-size: 14px;
}
 
.item {
  margin-bottom: 18px;
}
 
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
 
.box-card {
  width: 480px;
}
</style>

在这个例子中，<el-card>组件包含了一个头部（通过#header插槽定义）和一个简单的列表。CSS样式是为了提供基本的样式，使得卡片看起来更美观。