Ant Design of React 使用
一、基础环境
- Nodejs + NPM(NPM 随同 NodeJS 一起安装)
- NPX
//npm 可以直接使用 npx 命令, 如果不行,安装一下
npm install -g npx
- yarn
//安装 yarn
npm install -g yarn
//查看 yarn 版本
yarn --version
//将内建配置全部暴露
yarn run eject
//运行项目
yarn start
二、使用 create-react-app 创建 React 项目
- 安装和初始化
自动初始化一个脚手架并安装 React 项目的各种必要依赖,支持自动刷新和模块热替换
yarn create react-app antd-demo
# or
npx create-react-app antd-demo
这是 create-react-app 生成的 默认目录结构
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html #页面模板
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js #入口 JS 文件
│ └── logo.svg
└── yarn.lock
- 引入 antd
npm i antd
# or
yarn add antd
- 将内建配置全部暴露
yarn run eject
这是内置配置 暴露后的目录结构
├── README.md
├── package.json
├── config
│ ├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
│ ├── env.js
│ ├── getHttpsConfig.js
│ ├── modules.js
│ ├── paths.js
│ ├── pnpTs.js
│ ├── webpack.config.js
│ └── webpackDevServer.config.js
├── public #public文件夹则存放着被 public/index.html使用的资源。
│ ├── favicon.ico
│ ├── index.html #页面模板
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── scripts
│ ├── build.js
│ ├── start.js
│ └── test.js
├── src #只有在 src 目录下的文件才会被 webpack 编译,js 和 css 文件都建议放在此处
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js #入口 JS 文件
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
└── yarn.lock
三、安装 Ant Design
- 使用 npm 或 yarn 安装
npm install antd --save
yarn add antd