Vue DevUI 组件库规范文档

1. 组件库整体组件的api一致性
2. 组件api的数量和命名
3. demo的设计和组合
4. 指令命名规范
5. 组件目录/文件规范

5 组件目录/文件规范

1. 整体目录结构
2. 组件文件my-component.tsx
3. 组件入口文件index.ts
4. 组件类型文件规范my-component-types.ts
5. Composable规范useMyComponent.ts
6. 样式文件规范my-component.scss
7. 单元测试文件规范my-component.spec.ts

5.1 目录整体结构

my-component
├── __tests__                 // 组件单元测试
|  └── my-component.spec.ts
├── index.ts                  // 组件入口文件
└── src                       // 组件源码
   └── components             // 子组件
      ├── my-sub-component.ts
   └── composables            // 组件的逻辑部分 composable
      ├── my-use-component.ts
   ├── my-component-types.ts  // 组件类型文件
   ├── my-component.scss      // 组件样式
   └── my-component.tsx       // 组件

5.2 组件文件my-component.tsx

import { defineComponent, toRefs } from 'vue';
import type { SetupContext } from 'vue';
import { myComponentProps, MyComponentProps } from './my-component-types';
import useMyComponent from './use-button';
import './my-component.scss';

export default defineComponent({
  name: 'DMyComponent',
  components: {},
  directives: {},
  props: myComponentProps,
  emits: ['update:modelValue'],
  setup(props: MyComponentProps, ctx: SetupContext) {
    const { myProp } = toRefs(props);
    const { myUseVar, myUseMethod } = useMyComponent(myUseParam);

    return () => {
      return (
        <div class="devui-my-component">{ myProp.value }</div>
      );
    };
  },
});

5.3 组件入口文件index.ts

import type { App } from 'vue';
import MyComponent from './src/my-component';

export * from './src/my-component-types';

export { MyComponent };

export default {
  title: 'MyComponent 我的组件',
  category: '通用',
  status: '100%',
  install(app: App): void {
    app.component(MyComponent.name, MyComponent);
  },
};

5.4 组件类型文件规范my-component-types.ts

import { PropType, ExtractPropTypes } from 'vue';

export const myComponentProps = {
  myProp: {
    type: Number,
    default: 1
  },
  myProp2: {
    type: Array as PropType<number[]>,
    default: [5, 10, 20, 50]
  },
} as const;

export type MyComponentProps = ExtractPropTypes<typeof myComponentProps>;

5.5 Composable规范useMyComponent.ts

import { ref } from 'vue';

export default function useMyComponent(myUseParam) {
  const myUseVar = ref(xxx);

  const myUseMethod = () => {
    
  };

  return { myUseVar, myUseMethod };
}

5.6 样式文件规范my-component.scss

@import '../../styles-var/devui-var.scss';

.devui-my-component {

}

5.7 单元测试文件规范my-component.spec.ts

import { mount, DOMWrapper } from '@vue/test-utils';
import { ref } from 'vue';
import DMyComponent from '../src/my-component';

describe('MyComponent', () => {
  it('should render correctly', async () => {
    const wrapper = mount({
      components: { DMyComponent },
      template: `
        <d-my-component my-prop="xxx" />
      `,
      setup() {
        const myVar = ref(xxx);
        return { myVar };
      }
    });

    expect(xxx).toEqual(xxx);
  });
});