Vue 3 与 ElementPlus 深度结合：精美卡片示例从搭建到实现全揭秘！

以下是使用 Vue 3 和 ElementPlus 打造精美卡片示例的详细步骤及代码： 环境搭建 确保已经安装了 Vue 3 项目，并且安装了 ElementPlus。可以使用以下命令创建一个新的 Vue 3 项目： ```bash npm init vite@latest my - elementplus - card -- --template vue cd my - elementplus - card npm install npm install element-plus --save ``` 配置 ElementPlus 在 `main.js` 中引入并使用 ElementPlus： ```javascript import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app') ``` 创建卡片组件 在 `src` 目录下创建一个 `CardComponent.vue` 文件，代码如下： ```vue <template> <!-- 使用 ElCard 组件创建卡片 --> <el-card class="box-card"> <!-- 卡片的 --> <template #header> <div class="card-header"> <span>精美卡片</span> </div> </template> <!-- 卡片的内容 --> <div> <p>这是卡片的内容部分，你可以在这里展示各种信息。</p> <p>可以是文本、图片或者其他组件。</p> </div> <!-- 卡片的底部 --> <template #footer> <div class="card-footer"> <el-button type="primary">查看详情</el-button> </div> </template> </el-card> </template> <script setup> // 这里可以编写组件的逻辑代码，如果没有逻辑可以省略 </script> <style scoped> .box-card { width: 400px; margin: 20px auto; } .card-header { display: flex; justify-content: space-between; align-items: center; } .card-footer { display: flex; justify-content: flex-end; margin-top: 20px; } </style> ``` 在 `App.vue` 中使用卡片组件 ```vue <template> <div id="app"> <!-- 引入并使用卡片组件 --> <CardComponent /> </div> </template> <script setup> import CardComponent from './CardComponent.vue' </script> <style scoped> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ``` 运行项目 在终端中运行以下命令启动开发服务器： ```bash npm run dev ``` [2026-02-12 11:09:18 | AI写代码神器 | 714点数解答]