跳转到主要内容

使用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数据
回到顶部