xin_yu/ ├── src/ │ ├── components/
│ │ ├── Button/ │ │ │ ├── Button.vue
│ │ │ └── index.js
│ ├── styles/
│ └── index.js # 库入口文件 ├── vite.config.js └── package.json

一、 组件开发规范

1. 命名规范：

   组件文件名：PascalCase（如 DatePicker.vue）

   组件注册名：统一前缀（如 MyDatePicker）

2. Props 设计原则：

   使用对象形式定义 prop 验证

   为数值类型提供默认值

   使用 validator 进行枚举验证

3. 事件管理：

   使用 kebab-case 事件名（如 update:model-value）

   在 emits 选项中明确声明事件

4. 插槽规范：

   命名插槽使用 kebab-case

   提供插槽使用示例

5. 文档注释：

二、 组件库更新策略

1. 版本管理： bash

   npm version patch # 小版本更新 npm version minor # 功能更新 npm version major # 重大更新

2. 更新日志：

   创建 CHANGELOG.md，记录重要变更

3. 本地更新流程： bash

在组件库目录

npm run build
npm version patch
npm link

在使用项目目录

npm unlink xin_yu
npm link xin_yu

三、 组件中Tab组件使用示例：

内容1 # 自定义 Tab 内容 内容2

四、按需加载：

1. // vite.config.js export default defineConfig({
   build: {
   rollupOptions: { // 通过 rollupOptions 配置手动分块 output: { // 手动分块 manualChunks(id) { // 自定义分块 if (id.includes('node_modules')) return 'vendor' // 第三方库 if (id.includes('components/')) { // 组件库 const match = id.match(/components/(\w+)/) // 匹配组件名 return match ? chunk-${match[1]} : null // 生成 chunk-组件名 } } } } } })

2. 动态导入示例： // 使用场景：路由级懒加载 const AsyncComponent = defineAsyncComponent(() => // 通过 defineAsyncComponent 定义异步组件 import('./components/HeavyComponent.vue') // 通过异步组件实现懒加载 )

3. 按需加载组件： // 使用场景：按需加载组件 import { defineAsyncComponent } from 'vue' import { Button } from 'xin_yu'

export default { components: { Button, AsyncComponent: defineAsyncComponent(() => import('xin_yu/AsyncComponent')) //详细注释：按需加载组件，通过defineAsyncComponent函数实现异步组件的按需加载，并返回一个Promise对象，该Promise对象在组件加载完成后被resolve，并返回加载的组件。 具体实现是通过import()函数来动态导入组件，并通过then方法来处理加载后的组件。 } }

五、无障碍访问增强：

1. 键盘导航支持示例：

2. ARIA 属性规范： ARIA（Accessible Rich Internet Applications）是一个用于增强网页和应用程序的可访问性的标准。它提供了一套用于描述网页内容、控件和交互的属性和角色。

六、模式切换：

1. 组件库模式切换： $env:BUILD_MODE="lib"; npm run build

2. 正常模式切换： npm run build

七、更新日志： 2025/4/7 16:40 更新：1.0.3 添加了组件库模式切换和正常模式切换，方便开发调试。

2025/4/7 23:16 更新：1.0.4 修改了轮播图及相关组件的样式，优化了用户体验。

2025/4/9 10:30 更新：1.0.5 新增了SimpleCarousel组件，适合多图同屏展示。

2025/4/9 15:26 更新：1.0.6 修改了SimpleCarousel组件：name = "MultiItemCarousel" 关于自动轮播首次加载不轮播的问题，已解决。

2025/4/15 15:23 更新：1.1.6 --docs(components): 更新组件文档并优化开发环境

• 更新了多个组件的文档，包括 Button、Tab、Carousel 等
• 优化了开发环境配置，提高了开发效率
• 修复了一些组件在特定情况下的显示问题
• 调整了组件的命名和分类，使其更加合理

--添加了沙盒测试环境，方便开发者进行组件测试

2025/4/15 16:05 更新：1.1.7 修复了命名不统一的问题