</span>一、引言**<span style="color:blue">

【项目实战】Vue3+Vant3打造网页版掘金APP之徽章墙

**

在打造网页版掘金APP的征途上，我们已成功构建个人中心首页，但仍有诸多相关页面亟待实现。其中，徽章墙便是其中之一。本文将以Vue3+Vant3为基石，详解徽章墙页面的设计与实现，助力我们打造更臻完善的掘金APP体验。

**

徽章墙页面主要包含两部分：徽章展示区和个人信息展示区。徽章展示区位于页面顶部，陈列着用户所拥有的全部徽章；个人信息展示区位于页面底部，展示用户的基本信息和统计数据。

**

徽章数据

徽章数据从后端接口获取，通过Vuex进行状态管理。在页面初始化时，触发Vuex action，异步获取数据并更新状态。

个人信息数据

个人信息数据同样从后端接口获取，并通过Vuex进行状态管理。在页面初始化时，触发Vuex action，异步获取数据并更新状态。

**

徽章展示区采用Vant提供的Tag组件，每个徽章对应一个Tag。Tag组件支持设置颜色、大小和形状，以区分不同类型的徽章。

**

个人信息展示区采用Vant提供的Card组件，将用户头像、昵称、简介、粉丝数、关注数等信息包裹其中。Card组件提供多种风格，以满足不同展示需求。

**

点击徽章

点击徽章时，弹出一个模态框，展示徽章的详细信息，如获得时间、获得原因等。

点击个人信息

点击个人信息中的任何一项，跳转至对应的个人主页或创作者中心。

**

通过Vue3+Vant3的强大组合，我们成功打造了网页版掘金APP的徽章墙页面。该页面设计合理、交互友好，完美展示了用户的荣誉与个人信息。相信随着我们不断完善相关页面，掘金APP将成为广大技术爱好者的又一精神家园。

**

**