vite+vue3+tsx 大屏标准业务组件库

目录结构：

| /config -配置文件
| /package -组件
| /script -脚本
| /src -组件测试和文档
|- /doc -文档项目的框架
|- /test -存放对应的测试组件,目录name必须与组件对应,
| README.MD 说明文档

组件库 packages/* 命名规范

1. 组件文件夹 - 名称必须以 ac-* 格式命名;
2. 组件文件 - 命名必须以 AcTest 格式名称;
3. 组件文件夹内的文件有：【AcTest.tsx】【definition.ts】【index.ts】【index.scss】4 个文件;

组件编写规范

1. 组件 props/emits 必须单独声明变量, props/emits 命名必须是 acTestProps/acTestEmits 格式,API 只有规范命名才会生成对应的 API 文档。
2. 组件的每一个 prop/emit 都必须添加符合 JSDoc 标准的块级注释, 以便生成 API 文档时可以生成对应的 API 说明;

组件开发步骤：

1. 执行 npm run createCom，在 packages 目录下会自动生成组件所需的 4 个文件，同时会在 src/test 下生成组件的说明文档 README.md
2. 在 packages/index 引入这个组件并暴露，在 main.js 引入这个组件
3. 在上面生成的 4 个文件中去开发自己的组件吧！

AcTest.tsx

import { h, defineComponent, PropType } from 'vue';

const acTestProps = {
  /* 测试名称*/
  name: String as PropType<string>,
  /* 测试年龄*/
  age: Number as PropType<number>,
};

const acTestEmits = {
  'update:show': (payload: any) => {
    return true;
  },
  onClick: (payload: Event) => {
    return true;
  },
};

export default defineComponent({
  props: acTestProps,
  emits: acTestEmits,
  setup(props, { emit, slots }) {
    return () => <div>test</div>;
  },
});

definition.ts

import { definition } from '../commonTypes';
let _definition: definition = {
  name: 'ac-test',
  zhName: '组件中文名',
  state: '组件状态', // 'offline'下线 | 'doing'开发中 | 'finish'已完成；只有已完成的才会在文档中出现
};
export default _definition;

开发调试

• 启动调试

npm run dev

• 新增组件

npm run createCom

• 更新说明文档

npm run build:code

• 构建文档

npm run build:doc

代码发布

• npm run build:lib
• npm publish

组件库使用

• 安装依赖

npm install @markov_zheng/standard-vue-cockpit-components

• 引用组件（main.js）

import {AcButton} from "@markov_zheng/standard-vue-cockpit-components"
const app = createApp(App);
app.use(AcButton)