Ant Design的安装与使用。

桃扇骨 2023-05-29 03:34 3阅读 0赞

Ant Design是一个React UI 组件库，主要用于研发企业级中后台产品。

下面介绍下在  create-react-app  中使用 ant design。

假设你现在已经有一个create-react-app 搭建的react项目。基本目录如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

我们在此基础上安装并使用 antd

> npm  install antd --save    // 安装antd模块

(1)在App.js里面引入antd 的按钮组件。

在App.css里面引入antd的css文件。

【app.js】
    // 引入antd中的button组件
    import Button from 'antd/es/button';
    // 引入App.css文件，在该文件里面引入antd的css
    import './assets/css/App.css'
    
    
    render(){
        return(
            <div>
                <Button type="primary">我是antd组件的button</Button>
            </div>
        )
    }
    
    
    【App.css】里面引入：
    @import '~antd/dist/antd.css';

（2）得到的页面结果如下：

![20191103131113812.png][]

这样，我们的react项目中就成功的引入了antd 这个UI组件库。

如果想要按需引入antd中的css的话，可以参考官方文档：[【高级配置】][Link 1]

\------------------------------那么接下来就继续开发吧。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019110313305229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[20191103131113812.png]: https://img-blog.csdnimg.cn/20191103131113812.png
[Link 1]: https://ant.design/docs/react/use-with-create-react-app-cn

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 react ant-design安装方法

. node.js 下载10.版本的在官网 node -V （一般现在是无需配置直接装就可以是全局安装了，如果不行的话就需要百度一下系统环境配置） 2. 安装no...

刺骨的言语ヽ痛彻心扉/ 2024年04月18日 10:26/ 0 赞/ 84 阅读

相关 ant-design-vue：基础使用

一、环境介绍 vue3+ts+ant-design-vue 二、安装使用 2.1、安装脚手架工具 $ npm install -g @vue/cli

﹏ヽ暗。殇╰゛Y/ 2024年04月01日 09:55/ 0 赞/ 88 阅读

相关 Ant Design入门

目录一：什么是Ant Design？二：开始使用三：布局四：表格 -------------------- 一：什么是Ant Design？ Ant

不念不忘少年蓝@/ 2024年03月30日 12:40/ 0 赞/ 91 阅读

相关 React安装ant design组件库，并使用

ant design是一个很棒的组件库，官方地址：[快速上手 - Ant Design][- Ant Design] 但是如何在React里面用起来，好像并不是很顺畅，没有像

浅浅的花香味﹌/ 2023年10月14日 13:44/ 0 赞/ 68 阅读

相关 Ant Design的安装与使用。

Ant Design是一个React UI 组件库，主要用于研发企业级中后台产品。下面介绍下在 create-react-app 中使用 ant design。假

桃扇骨/ 2023年05月29日 03:34/ 0 赞/ 4 阅读

相关 react 中ant design的使用

1.antd官网 https://ant.design/docs/react/introduce-cn 2、React中全局样式使用Antd 1)、安装ant

「爱情、让人受尽委屈。」/ 2023年01月02日 06:25/ 0 赞/ 272 阅读

相关 Ant Design Vue 使用-引入 ant-design-vue并且使用

Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。 Ant Design Vu

布满荆棘的人生/ 2022年09月06日 10:19/ 0 赞/ 570 阅读

相关 React--ant design

Reactjs入门参考路径：[http://www.cnblogs.com/Leo\_wl/p/4489197.html][http_www.cnblogs.com_Leo_w

分手后的思念是犯贱/ 2022年07月13日 05:41/ 0 赞/ 247 阅读

相关 Ant的安装与使用

下载与安装在ant.apache.org可以找到下载的界面，根据推荐下载1.10.1的版本。解压到安装目录，解压后的目录有manual文件夹，包含Ant工具相

ゝ一纸荒年。/ 2022年06月07日 10:20/ 0 赞/ 193 阅读

相关 Ant的安装与使用（基础）

Ant简介 Ant是一种JAVA生成工具，管理整个项目编译、生成。 Ant安装登录[apache ant站点][apache ant]下载zip压缩包

蔚落/ 2022年05月30日 07:54/ 0 赞/ 289 阅读