dumi搭建react组件库

dumi官网搭建react组件库

按照官网命令我们搭建一个组件库

mkdir vultures-react && cd vultures-react
npx @umijs/create-dumi-lib
npm install
npm start

安装所需依赖

现在的组件库以及很成熟，我们可以跟据现有的组件库，例如antd、echarts二次封装成工作中用到的业务组件

// antd基础组件
npm install antd -S 
// 拖拽组件库
npm install react-beautiful-dnd --save

根据自己的需要安装依赖组件库

搭建第一个组件

修改目录中的Foo文件

// @FilePath: /vultures-react/src/Foo/index.tsx
import * as React from 'react';
import { Button } from 'antd';


const Foo = () => {
  return (
    <Button>搭建第一个按钮</Button>
  )
}

export default Foo

在文档中展示我们写的第一组件

必须导出，否侧组件库会报错

import * as React from 'react'
import {Foo} from '../index'

const Demo = () => {
  return  <Foo/>

}

export default Demo

查看组件

http://localhost:8000/foo 在地址中就能看到我们写的第一个组件了，但是不是有一些问题呢？我们导入的事antd的组件库，怎么显示是普通的button标签，一起来排查一下这个错误吧。

1. 打开控制台，看看antd的clas是否加上
2. 可以看到class的样式是有的，看来有可能是打包的css文件没有加载
3. 去官网查看，需要引入css样式
4. 在顶部加入 import 'antd/dist/antd.css'就可以啦