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
根据自己的需要安装依赖组件库
// @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标签,一起来排查一下这个错误吧。
import 'antd/dist/antd.css'
就可以啦