1.5.5 • Published 10 months ago
adder-components v1.5.5
adder-components 组件库
快速上手
安装依赖
npm i
启动服务
npm start
部署站点
npm run docs:build
测试用例
npm test
发布组件
npm publish
开发组件
创建组件文件
src
components
Foo
index.tsx // 组件文件
index.md // 组件库文件
index.test.tsx // 组件用例
index.scss // 组件样式(或使用styled-components)
组件编写
在 markdown 代码块中编写代码会失去类型提示和校验,不能像直接在 tsx 中那样丝滑,因此我们推荐使用 VSCode 插件 ts-in-markdown
import React, {FC} from 'react';
import { Button } from 'antd'
interface FooProps {
}
const Foo: FC<FooProps> = () => {
return <Button>测试</Button>
}
export default Foo
组件导出
export { default as Foo } from './components/Foo'
API 生成
组件 API 自动生成的前提是,确保 dumi 能够通过 TypeScript 类型定义 + 注解推导出 API 的内容
import React, {FC} from 'react';
import { Button } from 'antd'
interface FooProps {
/**
* 可以这样写属性描述
* @description 也可以显式加上描述名
* @description.zh-CN 还支持不同的 locale 后缀来实现多语言描述,使用 description 兜底
* @default 支持定义默认值
*/
className?: string; // 支持识别 TypeScript 可选类型为非必选属性
}
const FooPro: FC<FooProps> = () => {
return <Button>测试</Button>
}
export default FooPro
dumi 背后的类型解析工具是 react-docgen-typescript,更多类型和注解的用法可参考 它的文档。 组件 md 文档编写
---
nav:
title: 基础组件
path: /components
group:
title: Foo
---
```tsx
import { Foo } from 'adder-components';
import 'antd/dist/antd.css'
export default () => <Foo />;
```
其他 组件库搭建配置文档