# react+dumi+typescript搭建组件库开发环境
## 参考链接
- [concis从0到1搭建环境](正在上传…重新上传取消https://juejin.cn/post/7115414761646342152)
- [基于duim搭建组件库文档](https://juejin.cn/post/7057365237472690213)
- [dumi官网](https://d.umijs.org/zh-CN/config#menus)
## 搭建环境
### 安装
```
$ npx @umijs/create-dumi-lib # 初始化一个文档模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib
$ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架
# or
$ yarn create @umijs/dumi-lib --site
```
### 运行
```
npm i
npm run start
```
## 目录介绍
[请看链接](https://d.umijs.org/zh-CN/guide/basic)
## 修改默认配置
>你可以直接复制然后感受一下
.umirc.ts
```js
import { defineConfig } from 'dumi';
export default defineConfig({
title: 'react-view-design', // 你的组件库名字
// 你的网站 tabs 图片
favicon: 'https://pro.upload.logomaker.com.cn/temp24h/logo/e4ed29e0-0890-479b-aba3-06f77f990361.svg',
// 你的官网logo
logo: 'https://pro.upload.logomaker.com.cn/temp24h/logo/e4ed29e0-0890-479b-aba3-06f77f990361.svg',
outputPath: 'docs-dist',
mode: 'site',
apiParser: {
// 自定义属性过滤配置，也可以是一个函数，用法参考：https://github.com/styleguidist/react-docgen-typescript/#propfilter
propFilter: {
// 是否忽略从 node_modules 继承的属性，默认值为 false
skipNodeModules: true,
// 需要忽略的属性名列表，默认为空数组
skipPropsWithName: ['autoFocus', 'form', 'formAction', 'formEncType', 'title'],
// 是否忽略没有文档说明的属性，默认值为 false
skipPropsWithoutDoc: true,
},
},
history: {
type: 'hash',
},
// 配置你想配置一级导航
navs: [
null,
{
title: '作者',
children: [
{
title: 'CSDN',
path: 'https://blog.csdn.net/CarrreyYan_979292?type=blog',
},
{
title: '掘金',
path: 'https://juejin.cn/user/1785262616087192',
},
],
},
{
title: 'GitHub',
path: 'https://github.com/yq979292/Fluent-design0',
},
],
// styles: [style],
themeConfig: {
carrier: 'dumi', // 设备状态栏左侧的文本内容
hd: true,
},
});
```
>注意：这里如果启动页面失败，一定是运行环境问题，检查方式如下：
>1：看看node版本
>2：看看npm i 安装依赖是否成功。
>如果页面启动成功，如下图: 恭喜你搭建成功：
> - 请看链接 ： https://d.umijs.org/zh-CN/guide#%E4%BB%80%E4%B9%88%E6%98%AF-dumi
## 第一个组件注意事项
> /src/Foo 为你的第一个组件
> index.tsx 为组件的源代码
> index.md 组件的说明文档
参考并复制一下代码，一起感受一下：
%%index.tsx%%
```tsx
import React from 'react';
export default ({ title }: { title: string }) => <h1>{title}</h1>;
```
index.md
```md
---
title: Foo
nav:
title: 组件
path: /commponnets
group:
title: 通用
mobile: false
---
## FOO
```
>注意事项：每次**创建新组件**应该修改`/src/index.ts`
> 例如：
> export { default as Foo } from './Foo';
> 我的建议，大家可以阅读官网的基础使用，然后找一个参考说明文档格式，练习编写文档。
> 推荐参考文档如下：
> 1：Concis : http://concis.org.cn/#/common/modal
> 这是一个由个人完成的组件库，适合第一次写组件库的学习
下一篇文章：如何在dumi环境下支持scss语法。