AI SummaryCursor Rules for the Teek Vue3 admin dashboard system that enforces strict coding standards for component structure, TypeScript typing, and import organization. Developers working with Teek or similar Vue3+TypeScript projects benefit from consistent, enforceable code patterns.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "teek-design-vue3 — Cursor Rules" prompt rules to my project. Repository: https://github.com/Kele-Bingtang/teek-design-vue3 Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
Teek 是一个基于 Vue3、TypeScript、Vite、ElementPlus 构建的颜值强大、功能丰富、开箱即用的中后台管理系统解决方案。
组件格式
• 使用 <script setup lang="ts"> 语法 • 使用 defineOptions({ name: "Xxx" }) 定义组件名 • 使用 const ns = useNamespace("xx-xx") 创建命名空间 • 样式文件使用 @use "./index" 引入 • 使用 import { useNamespace } from "@/composables" 创建命名空间
类型定义规范
• Props 和 Emits 使用 TypeScript interface 定义 • 所有函数参数都要加类型注解 • 类型文件放在组件同级目录的 types.ts 中
导入规范
• 先引入所有 type 类型（按照导入规范顺序引入，不允许类型和函数的引入混杂在一起） • 引入第三方依赖（Vue 相关生态优先，如 vue、vue-router、vuex、vue-i18n、vue-use，然后是组件库如 Element Plus，@element-plus/icons-vue，最后是第三方插件） • 引入项目目录的其他依赖（@/路径，路径按照 src 目录结构顺序引入） • 引入项目目录的其他组件（@/路径，路径按照 src 目录结构顺序引入） • 引入相对路径的依赖（@/路径，路径按照 src 目录结构顺序引入） • 引入相对路径的组件（@/路径，路径按照 src 目录结构顺序引入） • 直接引入第三方库（如 import "vue-cropper/dist/index.css"） • 直接引入绝对路径（如 import "@/common/styles/common/var.scss"） • 直接引入相对路径（如 import "./index.scss"）
组件内 Composables 使用
• 不推荐直接在组件中写响应式变量、computed、watch、function、生命周期 • 将关联性高的代码放到 function useXx 里然后暴露出来使用 • 使用 defineModel 代替 props.modelValue
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts