Cursor rule

1---
2description: 代码编写规范
3globs:
4alwaysApply: true
5priority: 999
6---
7 
8## 组件格式
9 
10```vue
11<script setup lang="ts">
12import xxx from "xx";
13 
14defineOptions({ name: "Xxx" });
15 
16const ns = useNamespace("xx-xx");
17</script>
18 
19<template>
20  <div :class="ns.b()"></div>
21</template>
22 
23<style scoped lang="scss">
24@use "./index";
25</style>
26```
27 
28```scss
29@use "@styles/mixins/bem" as *;
30 
31@include b(xx-xx) {
32}
33```
34 
35## 带有 props、emits 的写法
36 
37```vue
38<script setup lang="ts">
39defineOptions({ name: "Demo" });
40 
41// 按照这种写法
42interface DemoProps {
43  modelValue: string;
44}
45 
46// 按照这种写法
47interface DemoEmits {
48  submit: [value: string];
49}
50 
51const props = defineProps<DemoProps>();
52const emit = defineEmits<DemoEmits>();
53 
54const ns = useNamespace("login");
55</script>
56 
57<template>
58  <div></div>
59</template>
60 
61<style scoped lang="scss">
62@use "./index";
63</style>
64```
65 
66## 组件里使用 composables
67 
68不推荐 `props`、`emits`、`响应式变量`、`computed`、`watch`、`function`、`生命周期` 的结构写法。
69 
70请使用可复用逻辑(composables)写法，即将关联性高的代码放到 `function useXx` 里然后暴露出来使用。
71 
72```vue
73<script setup lang="ts">
74import http from "xx";
75 
76defineOptions({ name: "Demo" });
77 
78interface DemoProps {
79  params: string;
80}
81 
82interface DemoEmits {
83  submit: [value: string];
84}
85 
86const props = defineProps<DemoProps>();
87const emit = defineEmits<DemoEmits>();
88 
89const ns = useNamespace("login");
90 
91const username = ref("");
92const password = ref("");
93 
94const { data } = useInitData();
95 
96// 核心请看这个 composables
97function useInitData() {
98  const data = ref<Recore<string, any>[]>([]);
99 
100  const request = async () => {
101    // 请求数据复制给 data
102    const result = await http.get(url, props.params);
103    data.value = result.data;
104  };
105 
106  return { data };
107}
108</script>
109 
110<template>
111  <div :class="ns.b()">
112    <input v-model="username" />
113    <input v-model="password" />
114  </div>
115</template>
116 
117<style scoped lang="scss">
118@use "./index";
119</style>
120```
121 
122## 类型引入规范
123 
1241. 先引入所有 `type` 类型（按照导入规范顺序引入，不允许类型和函数的引入混杂在一起）
1252. 引入第三方依赖（`Vue` 相关生态优先，如 `vue`、`vue-router`、`pinia`、`vue-i18n`、`@vueuse`，然后是组件库如 `ElementPlus`，`@element-plus/icons-vue`，最后是第三方插件）
1263. 引入项目目录的其他依赖（如 `@/composables`，路径按照目录结构顺序引入）
1274. 引入项目目录的其他组件（如 `@/components/index.vue`，路径按照目录结构顺序引入）
1285. 引入相对路径的依赖（如 `./types`）
1296. 引入相对路径的组件（如 `./Demo.vue`）
1307. 直接引入第三方库（如 `import "vue-cropper/dist/index.css"`）
1318. 直接引入绝对路径（如 `import "@/common/styles/common/var.scss"`）
1329. 直接引入相对路径（如 `import "./index.scss"`）
133 
134如：
135 
136```vue
137<script setup lang="ts">
138import type { xx } from "xx";
139import { xx } from "xx";
140import { xx } from "@/xx";
141import { xx } from "@/xx.vue";
142import { xx } from "../xx";
143import { xx } from "../xx.vue";
144 
145import "xxx";
146import "@/xxx";
147import "./xxx";
148</script>
149```
150