项目背景vue+vite+ts+router，帮我创建有效适用于Cursor智能体提示词

<think>好的，我现在需要帮助用户创建一个适用于Cursor智能体的提示词，项目背景是Vue3 +Vite + TypeScript + Vue Router。首先，我需要明确用户的需求。用户可能希望利用Cursor的代码生成和智能提示功能来高效开发Vue项目，所以提示词需要覆盖这些技术栈的最佳实践。 首先，我应该考虑Vue3的组合式API，因为这是Vue3的核心特性，使用setup语法糖可以简化代码。然后，Vite作为构建工具，配置方面可能需要优化，比如别名设置、插件集成等。TypeScript的强类型支持也很重要，需要确保生成的代码有正确的类型定义。Vue Router的部分可能涉及路由配置和导航守卫。接下来，我需要结构化提示词的内容。通常，有效的提示词需要明确技术栈、代码规范、组件结构、请求封装、状态管理等。可能还需要包括代码风格，比如ESLint和Prettier的配置，以及Vite的具体配置选项，比如别名和代理设置。然后，要考虑到Cursor的特性，它可能更擅长生成具体的代码片段，所以需要给出具体的例子，比如一个使用组合式API的组件，包含TypeScript类型、路由跳转、API请求封装等。同时，要确保代码符合Vue3的最佳实践，比如使用ref和reactive，生命周期钩子的使用，以及CompositionAPI的结构。 另外，用户可能希望提示词能指导生成模块化的代码结构，比如分离接口定义、工具类、组件和store。因此，在提示词中需要明确目录结构，比如src下的api、assets、components、router、store、utils、views等目录的作用。 还需要考虑请求封装部分，使用axios实例，设置拦截器处理全局错误和权限验证。状态管理可能使用Pinia，所以需要包含定义store的示例。最后，要检查是否涵盖了用户可能关心的其他方面，比如环境变量配置、CSS预处理器的使用、自动导入设置等。同时，提示词需要清晰、简洁，结构分明，便于Cursor理解和生成正确的代码。 现在，将这些思考整理成一个结构化的提示词模板，包含技术栈说明、代码规范、组件示例、请求封装、状态管理、路由配置等部分，并给出具体的代码示例，确保每个部分都有详细的说明和代码结构。这样用户在使用Cursor时，可以通过这些提示词生成符合项目需求的代码。</think>以下是为Cursor智能体设计的Vue3+Vite+TS+Router项目专用提示词模板，采用模块化结构设计： ```markdown 【智能体专属指令】Vue3技术栈专家 **技术组合**：Vue3 + TypeScript + Composition API + Vite5 + Vue Router4 **核心要求**： 1. 使用<script setup>语法糖 2. 强类型校验（TS接口+ESLint） 3. 模块化代码结构 4. Vite最佳实践配置 5. 路由懒加载实现 **组件模板**： ```typescript // 示例：带类型验证的智能组件 <template> <div class="container"> <router-link to="/detail">查看详情</router-link> <AsyncComponent :data="apiData" /> </div> </template> <script lang="ts" setup> // 自动导入API配置 import { fetchData } from '@/api/module' import type { ResponseType } from '@/types/api.d.ts' // 响应式数据 const apiData = ref<ResponseType[]>([]) const loading = ref<boolean>(false) // 生命周期 onMounted(() => initData()) // 方法实现 const initData = async () => { try { loading.value = true const { data } = await fetchData<ResponseType[]>() apiData.value = data } catch (err) { console.error('API Error:', err) } finally { loading.value = false } } </script> <style scoped> .container { max-width: 1200px; margin: 0 auto; } </style> ``` **架构规范**： 1. 目录结构： - src/ |- api/ # Axios实例+接口模块 |- assets/ # 静态资源 |- components/# 通用组件 |- router/ # 路由配置 |- store/ # Pinia状态管理 |- types/ # TS类型定义 |- utils/ # 工具函数 |- views/ # 路由组件 2. 请求封装示例： ```typescript // api/request.ts const service = axios.create({ baseURL: import.meta.env.VITE_APP_API, timeout: 15000 }) // 请求拦截 service.interceptors.request.use(config => { config.headers.Authorization = localStorage.getItem('token') return config }) // 响应拦截 service.interceptors.response.use( response => response.data, error => { ElMessage.error(error.message) return Promise.reject(error) } ) ``` 3. 路由配置示例： ```typescript // router/index.ts const routes: RouteRecordRaw[] = [ { path: '/', component: () => import('@/views/Home.vue'), meta: { requiresAuth: true } }, { path: '/detail/:id', component: () => import('@/views/Detail.vue'), props: true } ] ``` **优化要求**： 1. 自动导入组件/API 2. 环境变量智能提示 3. CSS预处理支持 4. 路径别名配置 5. 开发代理设置 ```