这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

新的部分

前言

从本章开始，将进入到组件开发的新的篇章，也从这一章，将不再过多的粘贴常规的布局代码、样式代码，逻辑部分的代码也主要是补充之前没有提到过的一些点，以及一些重要的逻辑代码部分。

文章中没有提到的部分可以通过查看我专门创建的专栏: Vue3从0到1组件开发。

主要的逻辑部分会详细的分享其存在的主要作用，以及适用场景，非必要的情况下呢，也不会贴出详细的代码了。

如果对组件感兴趣的小伙伴可以自己尝试开发，不知道如何下手也可以查看专栏中的基础组件进行入门学习，或者评论留下你的有疑问，看到之后会及时回复。

Card卡片的作用

相信不少有过开发经历的小伙伴都或多或少用过市面上比较著名的几个组件库，如elements、Vant等，可以看到，再完整的组件库基本都有提供这样一个组件，组件结构也比较简单。

以element举例，一个卡片组件基本由三大部分组成：head头部,content内容,button操作按钮。

在实际开发中，卡片组件也多用于展示主体内容，如文章列表、新闻列表等高度重复的内容。

Card卡片的开发

结构部分

结构部分比较简单，参照element组件库的样式作为参考，当然也可以根据自己的业务需求去设计大体结构，只要具备通用性即可。

这里给出一个大概的结构，可以自由发挥

<template lang="pug">
block content
main.yx-card
    header.yx-card-header
        p.yx-card-header-content
        div.yx-card-header-btn
            slot(v-if="!icon")
            yx-icons(v-else :type="icon")
    div.yx-card-content
</template>

pug语法看这里

不过结构比较简单，相信大家即便不去看pug语法也能理解这段代码。

主要逻辑

这里关于主要逻辑部分需要考虑的第一个问题，跳转到详情页，或者说跳转到指定界面，

所以需要接受一个url参数，并添加点击事件，如果存在url值，便跳转到指定界面。

再考虑一下是否需要动画效果等就行，这里也简单的列举下主要代码。

<script setup>
import {defineProps, defineEmit} from 'vue';
import yxIcons from '../icons/index'; // 自定义的图标组件，可以在专栏中找到

cosnt props = defineProps({
    url: String
    ... // 其他参数，
})

const clickLink = () => {
    if(!props.url) return;
    
    code
    // 根据项目情况进行跳转
}
</script>

如果只是期望开发一个常规的卡片组件，写完这些基本的逻辑部分便可以正常使用了。

但是如果参考Element组件库的话，这里还需要考虑鼠标经过的动画，给用户以反馈，提高用户友好度。

以及以图片为主要内容的布局。

这里可以给到一个type的传参来控制。

const props = defineProps({
    type: {
        validator: value => ['card','img'].includes(value),
        default: 'card'
    }
})

如上代码部分，写个验证器控制传入值，如果参数为'img'时，调整对应的类名以及样式代码就可以了。

最后

写的匆忙，来不及截屏做演示了，大家可以参考element组件库的card组件

但是不建议初学者直接看element组件的源码，有点难顶，可以先自己尝试开发，如果想深入学习完善的话，建议大家可以看看iviewui，relaxPlus等组件库的源码，比较简单，尤其推荐relaxPlus组件库，代码是基于Vue3的setup开发的，但是并非如我这般，直接使用setup-script语法来完成，但是也是对初学者比较友好的了。

Vue3从0到1组件开发-布局组件：Card卡片

新的部分

前言

Card卡片的作用

Card卡片的开发

结构部分

主要逻辑

最后