抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

andt 的介绍

Ant Design 是基于 React 实现,开发和服务于企业级后台产品。

支持环境

  • 现代浏览器和 IE9 及以上(需要 polyfills)。

  • 支持服务端渲染。

  • Electron

Electron(原名为Atom Shell)是GitHub开发的一个开源框架。 它允许使用Node.js(作为后端)和Chromium(作为前端)完成桌面GUI应用程序的开发。

很多客户端软件都是基于 Electron 开发的。比如 VS Code。我们打开 VS Code 菜单栏的 “帮助 –> 切换开发人员工具”,就会看到类似于 chrome的调试工具。

相关链接

andt 的使用

环境安装

1
npm install antd --save

代码示例

我们需要什么组件,就导入该组件即可。

(1)index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>

(2)main.js:

1
2
3
4
5
6
7
8
9
10
// 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"));

(3)MyComponent.jsx:

1
2
3
4
5
6
7