Antd 介绍

Antd 是一个由蚂蚁集团推出的组件库，全称为 Ant design，官网地址：https://ant.design/index-cn

早期 Antd 主要是基于 React 的组件库，对应的基于 Vue 的组件库，大家大多使用 ElementUI。而现在即使你是使用 Vue 技术栈，也能够使用 Antd Vue 来做为自己项目的组件库，官方地址：https://antdv.com/components/overview

关于组件库的概念，这里不再做过多的介绍，只要你会用 ElementUI，那么使用 Antd 也没有太多的问题。

下面我们主要看两个点：

安装 Antd
使用 Antd

安装 Antd

首先第一步就是安装 Antd，可以通过命令：

npm i antd

在使用的时候，需要引入对应的样式，因此我们在 index.js 中通过 import 来进行样式的引入：

// index.js
import "antd/dist/antd.min.css";

另外，组件里面的文本默认都是英文的，如果要配置成中文，需要引入中文语言包以及 ConfigProvider 组件，之后包裹项目根组件：

// index.js
import zhCN from "antd/es/locale/zh_CN"; // 中文语言包
import { ConfigProvider } from "antd"; 

// ...

root.render(
  <ConfigProvider locale={zhCN}>
  	<App />
  </ConfigProvider>
);

使用 Antd

安装好 Antd 之后，就可以愉快的使用组件库为我们所提供的组件了。

使用的步骤和 ElementUI 一样，首先通过 import 引入组件，例如：

import { Button } from 'antd';

之后就可以在 JSX 中使用该组件：

const App = () => (
  <>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <br />
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </>
);

至于该组件有一些什么样的属性和方法，需要我们参阅对应组件的文档说明。

下面是开发中常用的一些组件，大家可以提前去熟悉一下：

通用
- Button
- Icon
布局
- Grid
导航
- Pagination
数据录入
- Form
  - Input、Radio、Select...
数据展示
- Table
- Card
反馈
- Alert
- Message
- Model

2.3 KiB Raw Permalink Blame History

Antd 介绍

安装 Antd

使用 Antd

2.3 KiB

Raw Permalink Blame History