使用Vue3自定义DashBoardCard组件，轻松解决首页面板顶部卡片的复用问题

最近在做一套Vue3后台管理系统的模板，今天给大家分享一下，关于首页面板顶部的卡片列表是如何实现的。如下图：

这里我封装了一个DashBoardCard组件。

{{ props.title }} {{ props.num }} {{ props.unit }} style="width: 2.5rem; height: 2.5rem"> {{ props.description }}  {{ props.result }}

const props = defineProps({ title: String, // 标题 num: Number,//数量 unit: String, // 单位 icon: String, // 图标 iconColor: String, // 图标颜色 description: String, // 描述 result: String, // 结果})

引入方式如下：

import DashBoardCard from "@/components/DashBoardCard.vue";

最后使用方式如下：

一开始我是准备是Card这个组件的，因为做这种卡片类型的页面效果，使用Card卡片是最适合的了。不过后面使用的过程中才发现，这种被封装好的组件，非常不利于二次开发，除非业务中遇到几乎不需要修改任何样式就能够使用的场景，否则最好是自己定制化的实现相关的组件。

这套管理系统是属于Vue基础学完以后的实战课，在这套课程之前，还有一个PrimeVue框架的系统学习课。也就是说，目前有三套课是可供大家选择的，分别是：1.Vue基础课、2.PrimeVue UI框架系统学习课、3.Vue3后台管理系统实战课。如果您感兴趣，欢迎私信我，随时都可以报名学习。支持：1.录播课、2.直播课、3.私教课三种形式。

整个管理系统界面非常的丰富，首页面板如下：

这套管理系统是基于PrimeVue UI框架的，所以如果要学习管理系统实战课的话，建议先学习Vue的基础课和PrimeVue UI的体系课。

PrimeVue UI这个框架非常的强大，提供的组件非常的丰富，非常值得大家去学习。

这三门课也是后续Python基础课，Django Ninja课，Flask课和FastAPI课的基础。在这些课的后面，还提供得有自研zdppy框架进阶课和自研zdpgo框架进阶课。目前zdppy框架已经能够实现一整套Python的Web后端开发体系了，zdpgo框架也初步能够实现一整套Golang的Web后端开发体系，能够做到在几乎零依赖的情况下进行Web后端开发，不会受到开源框架版本迭代的影响，而且这两个框架都是国产化的框架，后续会越来越好。

今天的介绍就到这里了，谢谢大家。