前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >dumi搭建react组件库

dumi搭建react组件库

作者头像
用户6256742
发布2024-05-25 09:56:06
550
发布2024-05-25 09:56:06
举报
文章被收录于专栏:网络日志网络日志

dumi官网搭建react组件库

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

代码语言:javascript
复制
mkdir vultures-react && cd vultures-react
npx @umijs/create-dumi-lib
npm install
npm start

安装所需依赖

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

代码语言:javascript
复制
// antd基础组件
npm install antd -S 
// 拖拽组件库
npm install react-beautiful-dnd --save

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

搭建第一个组件

修改目录中的Foo文件
代码语言:javascript
复制
// @FilePath: /vultures-react/src/Foo/index.tsx
import * as React from 'react';
import { Button } from 'antd';


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

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

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

代码语言:javascript
复制
import * as React from 'react'
import {Foo} from '../index'

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

}

export default Demo
dumi搭建react组件库
dumi搭建react组件库
查看组件

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

dumi搭建react组件库
dumi搭建react组件库
  1. 打开控制台,看看antd的clas是否加上
dumi搭建react组件库
dumi搭建react组件库
  1. 可以看到class的样式是有的,看来有可能是打包的css文件没有加载
  2. 去官网查看,需要引入css样式
  3. 在顶部加入 import 'antd/dist/antd.css'就可以啦
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • dumi官网搭建react组件库
    • 按照官网命令我们搭建一个组件库
      • 安装所需依赖
        • 搭建第一个组件
          • 修改目录中的Foo文件
          • 在文档中展示我们写的第一组件
          • 查看组件
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档