网络日志

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'就可以啦