使用chrome devtools mcp将axure原型重新实现为vue页面

安装chrome devtools mcp
{
 "mcpServers": {
 "chrome-devtools": {
 "command": "npx",
 "args": [
 "-y",
 "chrome-devtools-mcp@latest"
 ]
 }
 }
}

打开axure原型预览
开始使用自然语言创建项目

创建空项目

创建一个功能完整的移动端应用项目，包含基础的应用框架结构。需实现底部导航栏功能，导航栏应包含三个主要选项卡，分别为"首页"、"列表"和"我的"。确保应用框架具备页面路由管理、状态管理基础架构和响应式布局设计，以适应不同移动设备屏幕尺寸。底部导航栏需实现点击切换页面功能，当前选中项应有明显的视觉标识，并确保在应用启动时默认显示正确的初始页面。

项目级安装`yarn`，使用yarn安装vant , vue-router ,pinia ,swiper ,crypto-js

使用chrome devtools 打开原型页面并分析和创建对应的页面

使用chrome devtools mcp 打开http://127.0.0.1:32767/15.00.38/index.html

这是axure的原型预览页面，按项目要求实现这个页面到index.vue

保持现有元素和布局不变，参考@public/xvH3GTQIlVovTIZM-image-1764727739274.png 风格，对@src/views/index/index.vue 进行美化

实现我的页面

实现detail页面，当点击@src/views/index/index.vue 中的精彩活动时进行跳转，将数据共享为外部json数据

使用 Chrome DevTools MCP 打开 http://yapi.xxx/xxx，提取 `.right-content` 的 API 文档，按项目实现 API 函数，并在 XXX 区块中集成展示。