工具:vscode
信息架构+原型+流程图参考:https://www.jianshu.com/p/d28c22ca6cd4
准备阶段
1.安装和初始化
打开一个文件夹,在控制台输入
$ npm i yarn ##安装yarn
$ yarn create react-app system-wmt ##文件名:system-wmt;自动初始化一个脚手架并安装 React 项目的各种必要依赖
$ cd antd-demo ##进入项目
$ yarn start ##启动项目此时浏览器会访问 http://localhost:3000/ ,看到 Welcome to React 的界面
2.引入antd
$ yarn add antd ## 安装并引入 antd
$ npm i antd -S ## 安装并引入 antd
修改 src/App.js,引入 antd 的按钮组件
import React, {
Component } from 'react';
import Button from 'antd/es/button';
import './App.css';
export default class App extends Component {
render() {
return (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
}
}
修改 src/App.css,在文件顶部引入 antd/dist/antd.css
@import '~antd/dist/antd.css';
.App {
text-align: center;
}
3.按需引入配置
1).使用customize-cra
$ yarn add react-app-rewired customize-cr