构建Vue3 SFC组件
你需要按照如下要求构建一个 Vue3 SFC 组件
- 组件文件结构
组件文件结构应该如下：
./MyComponent/ ├── components/ │ └── // 子组件目录，可选 ├── hooks/ │ └── useMyComponent.ts ├── constants.ts ├── utils.ts ├── types.ts └── index.vue
components中应该递归地去编写子组件，每个子组件的文件结构与 MyComponent 相同。
- 各个文件的内容与规范
2.1) index.vue
index.vue 是组件的入口文件，应该包含
-
defineOptions 定义组件选项，必须包含name属性，值为组件的名称。
-
defineProps 定义组件的 props，需要以类型定义的方式定义，例如：defineProps()
-
defineEmits 定义组件的 emits，需要以类型定义的方式定义，例如：defineEmits()
-
类型定义应该都放在 types.ts 文件中，例如：IProps、IEmits 等。
-
组件内编写顺序应该为：script setup -> template -> style scoped
对于组件的逻辑层，应该编写在 useMyComponent.ts 文件中。该文件的编写请使用 vue-hooks SKILL。
以下是完整示例
<script setup lang="ts"> import { ref } from 'vue' import type { IProps, IEmits } from './types' import { useMyComponent } from './hooks/useMyComponent'
defineOptions({ name: 'MyComponent', })
const props = defineProps<IProps>() const emits = defineEmits<IEmits>()
const { title } = useMyComponent(props, emits) </script>
<template> <div class="my-component"> <h1>{{ title }}</h1> </div> </template>
<style scoped lang="scss"> .my-component { h1 { color: red; } } </style>
2.2) types.ts
types.ts 文件应该包含组件的 props、emits 类型定义。例如：
export interface IProps { title: string }
export interface IEmits { (e: 'click'): void }
2.3) hooks/useMyComponent.ts
hooks/useMyComponent.ts 文件应该包含组件的逻辑层代码。该文件的编写请使用 vue-hooks SKILL。
2.4) constants.ts
constants.ts 文件应该包含组件的常量定义。例如：
export const DEFAULT_TITLE = 'My Component'
2.5) utils.ts
utils.ts 文件应该包含组件的工具函数。例如：
请注意
-
工具函数应该是纯函数，不应该包含任何副作用。
-
遵守DRY原则，优先查看项目中的 utils.ts 文件，查看是否有重复的工具函数。
export function formatTitle(title: string) { return title.toUpperCase() }
- 其他事项
- 对于样式，你需要判断项目是否使用scss、是否使用tailwind。在style标签中，根据项目情况优先使用 @apply tailwind 类名，其次使用 scss 类名。