需用Vite创建Vue3项目，通过ref/reactive实现响应式数据绑定，监听resize更新视口宽度，结合CSS媒体查询（768px/1024px断点）与v-if按设备类型条件渲染组件。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用Cursor开发Vue响应式页面，需在AI编程环境中完成项目初始化、组件编写、状态绑定与视口适配全流程，确保页面在手机、平板、桌面端自动调整布局和交互行为。
创建Vue3 Vite项目
打开Cursor → 新建文件夹 → 终端中执行 npm create vite@latest my-vue-app -- --template vue → 进入项目目录 → 运行 npm install。
这一步必须用Vite而非Vue CLI，因为Cursor的AI补全对Vite的src/main.js和src/App.vue结构识别更准，旧模板会导致后续ref推导失败。
启用响应式数据与模板绑定
在src/App.vue中，用setup语法糖声明响应式变量：
方法一：使用ref管理简单值
导入ref → 定义const count = ref(0) → 模板中用{{ count }}直接渲染；【count.value必须显式赋值，写成count++会报错】
方法二：使用reactive管理对象
导入reactive → 定义const state = reactive({ name: 'Vue', width: 0 }) → 模板中直接写{{ state.name }}，无需.value后缀。
监听屏幕尺寸变化并更新状态
第一步：在setup内定义width响应式变量
第二步：用onMounted注册window.resize事件监听器
第三步：在监听函数中调用state.width = window.innerWidth
第四步：用onUnmounted清除监听器，防止内存泄漏
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
注意：不要在onMounted外直接写window.innerWidth，首次渲染时可能取到错误值（如0），必须等DOM挂载后再读取。
用CSS媒体查询实现断点布局
在中写：@media (max-width: 768px) { .container { flex-direction: column; } }@media (min-width: 769px) and (max-width: 1024px) { .container { padding: 1rem; } }
Cursor能自动补全常见断点值，但768px和1024px必须手敲，AI常误推为767px或1023px，导致iPad横竖屏切换时样式失效。
用v-if按设备类型渲染不同组件
方法一：基于state.width判断
当state.width 时显示
方法二：用navigator.userAgent粗略检测
在setup中写const isMobile = /iPhone|Android/i.test(navigator.userAgent) → 模板中用v-if="isMobile"
【此方法仅作降级兜底，不能替代CSS媒体查询】
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
