简述Ant Design的使用

最新推荐文章于 2024-03-15 14:58:32 发布

可乐不可乐QAQ

最新推荐文章于 2024-03-15 14:58:32 发布

阅读量2.1k

点赞数 4

分类专栏： react 文章标签： js react babel

本文链接：https://blog.csdn.net/m0_46587577/article/details/109663168

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Ant Design简述

Ant Design 是蚂蚁金服开源的，一款十分好用的UI组件库，基于react（官方实现），目前也支持vue，angular等框架
基于React官网：https://ant.design/index-cn
基于 Vue官网：https://www.antdv.com/docs/vue/introduce-cn/
基于Angular官网：https://ng.ant.design/docs/introduce/zh

antd的组件十分丰富，齐全，样式也很新颖，而且使用也十分方便。

就像bootstrap框架一样，我们在使用的时候，只需要引入js文件，以及css文件就可以使用了。不过与之不同的是：在antd中，我们使用的原生标签都被封装为一个个的组件，这样我们在使用时可以按需引入。所以我们不用一下子引入整个js文件，这极大地提升了性能。

本文举例基于react

cdn使用（不推荐）：

一般是不推荐使用cdn的，但是我们也可以了解一下：

在html页面，我们需要引入react的cdn，antd的cdn，以及babel的cdn
antd cdn网址：https://cdn.baomitu.com/antd

举一个最简单的例子，使用一个默认的按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入antd的css-->
    <link crossorigin="anonymous" integrity="sha512-8Azllwu5Bw3iCCAVsRtGmK/li+iLviw7NoejoNSsqYOfBGWNIrXmQKLboD8VH296kgUqBTVIxNQ7iVl227QbYQ==" href="https://lib.baomitu.com/antd/4.11.2/antd.css" rel="stylesheet">
    <!--引入react-->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!--引入babel 生产环境中不建议使用 -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <!--引入antd的js-->
    <script crossorigin="anonymous" integrity="sha512-rRrxNrN9MrCy+EYTp4iUXV7KqA1BUkH3wvdCJpnBx35HW/waTc7ganh3vsa8j4KLHtC+WoXZH+L2Tx7eXu6i0Q==" src="https://lib.baomitu.com/antd/4.11.2/antd-with-locales.js"></script>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
      /*   不能这样引入
        import {Button} from "antd";*/

        ReactDOM.render (<div>
            {/*使用时必须在组件前加入 antd*/}
            <antd.Button>你好</antd.Button>
        </div>,document.getElementById("root"))

    </script>
</body>
</html>

效果如图：
在这里插入图片描述

安装依赖使用：

在安装antd 的依赖之前，我们得先创建一个react项目，这里就不详细说明，大家可以用 create-react-app 自己来创建一个
在创建完react项目后，我们得安装antd 的依赖

<!--可以使用yarn 安装-->
yarn add antd 
<!--也可以使用npm安装-->
npm i antd
<!--安装图标-->
npm install --save @ant-design/icons

安装完成后我们可以在node_modules中查看我们所安装的依赖：
在这里插入图片描述
接下来我们就可以来使用了，我们可以在官网查看组件以及其API，
例如：

import React, {PureComponent} from 'react';
// 在这里引入需要的组件
import {Button, Col, Typography} from 'antd';
// 引入css,可以直接在父组件中引入一次
import 'antd/dist/antd.css'

class Blog extends PureComponent {
    render() {
        return (
            <Col push={2}>
                 {/*引入组件后直接使用就行*/}
             <Typography.Title level={3} type="success">欢迎使用Ant Design</Typography.Title>
             <Button type="primary">点我</Button>
            </Col>
        );
    }
}

export default Blog;

效果展示：
在这里插入图片描述

这就是一个非常简单的案例，使用起来是不是很简单呢。

可乐不可乐QAQ

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
简述Ant Design的使用

使用Ant Design的方式最近在学习antd 框架，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script
复制链接

扫一扫