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

安装chrome devtools mcp

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

打开axure原型预览

开始使用自然语言创建项目

• 创建空项目

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


项目级安装`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 

分析页面元素和结构，实现相码到index.vue