cursor vue3 rules

  1. vue-3-typescript-guidelines
js 复制代码
---
description: Enforces the use of TypeScript for type safety in Vue 3 projects, especially for .ts files.
globs: src/**/*.ts
---
- Use TypeScript for type safety
- Implement proper props and emits definitions
  1. vue-3-additional-instructions
js 复制代码
---
description: Additional instructions for Vue 3 development, covering areas like error handling, styling and best practices.
globs: src/**/*
---
- Utilize Vue 3's Teleport component when needed
- Use Suspense for async components
- Implement proper error handling
- Follow Vue 3 style guide and naming conventions
- Use Vite for fast development and building
  1. vue-3-composition-api---composables
js 复制代码
---
description: Specific rules for composables in the Vue 3 Composition API. This focuses on how to structure and implement reusable logic using composables.
globs: src/composables/**/*.js
---
- Use setup() function for component logic
- Utilize ref and reactive for reactive state
  1. vue-3-composition-api---general
js 复制代码
---
description: General guidelines for Vue 3 components using the Composition API. This includes best practices and recommendations for component structure and reactive state management.
globs: src/**/*.vue
---
- Use setup() function for component logic
- Utilize ref and reactive for reactive state
- Implement computed properties with computed()
- Use watch and watchEffect for side effects
- Implement lifecycle hooks with onMounted, onUpdated, etc.
- Utilize provide/inject for dependency injection

5.vue-3-project-structure

js 复制代码
---
description: Defines the recommended folder structure for a Vue 3 project to maintain consistency and organization.
globs: src/**/*
---
- Recommended folder structure:
  - src/
    - components/
    - composables/
    - views/
    - router/
    - store/
    - assets/
    - App.vue
    - main.js
  1. vue-nuxt-general-rules
js 复制代码
---
description: Applies to Vue 3 and Nuxt 3 projects, enforcing best practices for frontend development including TypeScript, TailwindCSS, and Composition API.
globs: **/*.{vue,ts,js,jsx,tsx}
---
- You are a Senior Frontend Developer and an Expert in Vue 3, Nuxt 3, JavaScript, TypeScript, TailwindCSS, HTML and CSS.
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code.
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality. Ensure code is complete!
- Verify thoroughly finalised.
- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or <style> tags.
- Always use composition api.
- Use descriptive variable and function/const names. Also, event functions should be named with a "handle" prefix, like "handleClick" for onClick and "handleKeyDown" for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex="0", aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, "const toggle = () =>". Also, define a type if possible.

7.vue-js-conventions

js 复制代码
---
description: Specific conventions for Vue.js components. Follow Vue.js docs where appropriate.
globs: src/components/**/*.vue
---
- Follow Vue.js documentation for best practices.
- Organize component options in a consistent order (e.g., data, computed, methods, watch, lifecycle hooks).
- Use `v-bind` and `v-on` directives for data binding and event handling.
- Prefer using single file components (.vue files).
  1. vueuse-library-rule
js 复制代码
---
description: Encourages leveraging VueUse functions throughout the project to enhance reactivity and performance.
globs: src/**/*.*
---
- Leverage VueUse functions where applicable to enhance reactivity and performance.
  1. vue-js-component-rule
js 复制代码
---
description: Defines the style and structure for Vue.js components, including naming conventions, composition API usage, and UI library preferences.
globs: src/components/**/*.vue
---
- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for functions.
- Always use the Vue Composition API script setup style.
- Use DaisyUI, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
相关推荐
_丿丨丨_4 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
hbrown9 小时前
Flask+LayUI开发手记(十一):选项集合的数据库扩展类
前端·数据库·python·layui
猫头虎9 小时前
什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?
前端·python·scrapy·arcgis·npm·beautifulsoup·pip