08-Ant Design的基本使用
千古壹号
# andt 的介绍
Ant Design 是基于 React 实现，开发和服务于企业级后台产品。
# 支持环境
现代浏览器和 IE9 及以上（需要 polyfills）。
支持服务端渲染。
Electron（原名为Atom Shell）是GitHub开发的一个开源框架。 它允许使用Node.js（作为后端）和Chromium（作为前端）完成桌面GUI应用程序的开发。
很多客户端软件都是基于 Electron 开发的。比如 VS Code。我们打开 VS Code 菜单栏的 “帮助 --> 切换开发人员工具”，就会看到类似于 chrome的调试工具。
# 相关链接
# andt 的使用
# 环境安装
npm install antd --save
1
# 代码示例
我们需要什么组件，就导入该组件即可。
（1）index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
<div id="app"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
（2）main.js:
// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "./components/MyComponent.jsx";
// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(<MyComponent></MyComponent>, document.getElementById("app"));
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
(3)MyComponent.jsx:
import React from "react";
// 导入 日期选择组件
import { DatePicker } from "antd";
export default class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
<h3>在组件中引入 andt</h3>
<DatePicker />
</div>
);
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
代码运行效果：
20190217_1500.png
# AntD组件
# 表格
pagination属性可以用来分页。
# loading框
需求：在数据显示之前，展示 loading；在数据显示之后，关闭loading。
# 相关问题的链接
# AntD pro，跳转到详情页，携带参数
# AntD pro ，必填项前面，显示星号
# 其他问题
面包屑层级显示问题：https://github.com/ant-design/ant-design-pro/issues/1584
from验证input框只能输入数字：https://blog.csdn.net/zr15829039341/article/details/82745239