cursor rule是什么，以及怎么定義，看這個文章：
cursor中定義cursor rules_cursor rules如何編寫-CSDN博客
針對現有一個vue3的前端項目，寫了一份cursor rule，可以作為參考，內容如下（僅作為參考，需要根據自己項目實際情況，進行調整）：
# Vue3規范## 項目概述
本項目基于 JavaScript + Vue3 + Vite5 + Pinia + Ant Design Vue 4.X 構建，適用于中大型管理類項目，支持現代前端開發流程。## Vue3 基礎規范### 項目命名
- **全部采用小寫方式， 以中劃線分隔。
舉例：`smart-admin`### 目錄、文件命名
- **目錄、文件名 均以 小寫方式， 以中劃線分隔。
舉例：`/head-search/`、`/shopping-car/`、`smart-logo.png`、`role-form.vue`### 單引號、雙引號、分號
- **html中、vue的template 中 標簽屬性 使用 雙引號
- **所有js中的 字符串 使用 單引號
- **所有js中的代碼行換行要用 分號## Vue3 組合式 API規范### 使用setup語法糖
- **組件必須使用 setup 語法糖
- **setup 大法方便簡潔
- **全局都要使用setup語法糖### 組合式Composition API 規范
- **組件內必須使用模塊化思想，把代碼 進行 拆分；
- **參照 vue3官方文檔對于 Composition Api的理解： 更靈活的代碼組織 ，組合式Api，即 Composition API 解決的是讓 相互關聯的代碼在一起，以更方便的組織代碼，故代碼格式如下：
即：將相關的 變量和代碼 寫到一起，并使用 行注釋 進行分塊
<script setup>
// 各種需要導入
import xxxxx;
import xxxxx;
import xxxxx;// -------- 定義組件屬性和對外暴露的方法、以及拋出的事件 --------
// -------- 表格查詢的 變量和方法 --------
// -------- 批量操作的 變量和方法 --------
// -------- 表單的 變量和方法 --------
</script>舉例，分成了兩個模塊，即：
模塊1：顯示 、隱藏操作的 變量和方法
模塊2：表單的 變量和方法### 模板引用變量Ref
- **使用 ref方法，參數為空 進行聲明變量
- **變量必須以 Ref為結尾
- **template中的ref 也必須以 Ref 為結尾### 變量和方法的注釋
- **變量必須都加上注釋
- **方法必須加上注釋## Vue3 組件規范### 組件文件名
組件文件名應該為 pascal-case 格式
舉例：
components
|- my-component.vue父子組件文件名
舉例：
components
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）### 組件屬性
組件屬性較多，應該主動換行。
舉例：
<MyComponent foo="a" bar="b" baz="c"foo="a" bar="b" baz="c"foo="a" bar="b" baz="c"/>### 模板中表達式
組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。復雜表達式會讓你的模板變得不那么聲明式。應該盡量描述應該出現的是什么，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。
舉例：
<template><p>{{ normalizedFullName }}</p>
</template>// 復雜表達式已經移入一個計算屬性
computed: {normalizedFullName: function () {
? return this.fullName.split(' ').map(function (word) {
? return word[0].toUpperCase() + word.slice(1)
? }).join(' ')}
}### 標簽順序
單文件組件應該總是讓標簽順序保持為 <template> 、<script>、 <style>
舉例：
<template>...</template>
<script>...</script>
<style>...</style>## Vue Router 規范### 頁面傳參
頁面跳轉，例如 A 頁面跳轉到 B 頁面，需要將 A 頁面的數據傳遞到 B 頁面，推薦使用 路由參數進行傳參，即 {query:param}
舉例：
let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });### path 和 name 命名規范
- **pathkebab-case命名規范（盡量與vue文件的目錄結構保持一致，因為目錄、文件名都是kebab-case，這樣很方便找到對應的文件）
- **path 必須以 / 開頭，即使是children里的path也要以 / 開頭。如下示例
- **經常有這樣的場景：某個頁面有問題，要立刻找到這個vue文件，如果不用以/開頭，path為parent和children組成的，可能經常需要在router文件里搜索多次才能找到，而如果以/開頭，則能立刻搜索到對應的組件
- **name 命名規范采用KebabCase命名規范且和component組件名保持一致！（因為要保持keep-alive特性，keep-alive按照component的name進行緩存，所以兩者必須高度保持一致）## Vue 項目規范### 目錄規范
src 源碼目錄
|-- api 所有api接口，按照`business、system、support`拆分子目錄
|-- assets 靜態資源，images, icons, styles等
|-- components 公用組件，按照`business、system、support`拆分子目錄
|-- config 配置信息（項目配置）
|-- constants 常量信息，項目所有Enum, 全局常量等，按照`business、system、support`拆分子目錄
|-- directives 自定義指令
|-- i18n 國際化
|-- lib 外部引用的插件存放及修改文件
|-- plugins 插件，全局使用
|-- router 路由，統一管理
|-- store pinia狀態, 按照`business、system、support`拆分子目錄
|-- theme 自定義樣式主題
|-- utils 工具類
|-- views 視圖目錄，按照`business、system、support`拆分子目錄
| |-- business 業務目錄
| |-- support 支撐目錄
| |-- system 系統目錄### api 目錄
- **api文件要以api為結尾，比如 employee-api.js、login-api.js，方便查找
- **api文件必須導出對象必須以Api為結尾，如：employeeApi、noticeApi
- **api中以一個對象將方法包裹
- **api中的注釋，必須和后端 swagger 文檔保持一致，同時保留后端作者### assets 目錄
- **assets 為靜態資源，里面存放 images, styles, icons 等靜態資源，靜態資源命名格式為 kebab-case
|assets
|-- icons
|-- images
| |-- background-color.png
| |-- upload-header.png
|-- styles### components 目錄
- **此目錄應按照組件進行目錄劃分，目錄命名為 kebab-case，一個組件必須一個單獨的目錄 ；
目的：
- **一個組件一個目錄是為了將來組件的擴展，因為這是整個項目公用的組件
- **組件入口必須為 index.vue，原因也是因為這是整個項目公用的組件### constants 目錄
此目錄存放項目所有常量和枚舉
具體要求：
- **常量文件要以 const 為結尾，比如login-const.js、file-const.js
- **變量要：大寫下劃線，比如 LOGIN_RESULT_ENUM、LOGIN_SUCCESS、LOGIN_FAIL
- **如果是 枚舉，變量必須以 ENUM為結尾，如：LOGIN_RESULT_ENUM、CODE_FRONT_COMPONENT_ENUM
例子： employee-const.js
export const EMPLOYEE_STATUS = {NORMAL: {value: 1,desc: '正常'},DISABLED: {value: 1,desc: '禁用'},DELETED: {value: 2,desc: '已刪除'}
};### router 與 store 目錄
- **這兩個目錄一定要將業務進行拆分，不能放到一個 js 文件里。
- **router 盡量按照 views 中的結構保持一致
- **store 按照業務進行拆分不同的 js 文件### views 目錄
- **目錄要求，按照模塊劃分，其中具體文件名要求如下：
- **如果是列表頁面，要以list為結尾，如role-list.vue、cache-list.vue
- **如果是 表單頁面，要以 form為結尾，如 role-form.vue、notice-add-form.vue
- **如果是 modal彈窗，要以 modal為結尾，如 表單彈窗 role-form-modal.vue，詳情 role-detail-modal.vue
- **如果是 drawer 抽屜頁面，要同上以 drawer為結尾
)
)
0-＞b 講解)
