版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/well2049/article/details/81266135
Antd 开发后台管理第一次记录
- 通过
create-react-app antd-admin
创建react项目 - 安装antd
yarn add antd axios
- 设置antd 按需加载,需要安装依赖库:
yarn add babel-plugin-import
- 安装状态管理工具redux和调试工具:
yarn add redux react-redux redux-thunk
调试工具安装比较麻烦文档在github的 直接安装
yarn add redux-devtools
安装路由管理 route :
yarn add route react-router react-router-dom
- 安装一个支持@装饰器的依赖:
yarn add babel-plugin-transform-decorators-legacy --dev
- 设置
package.json
实现antd按需加载和@符合的支持
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": "css"
}
],
"transform-decorators-legacy"
]
},
"eslintConfig": {
"extends": "react-app"
},
"proxy": "http://localhost:8001",
关于react-redux 的使用,参照文档,自我总结以下注意事项:
第一:创建store
如果在使用@connect()
时遇到cannot read property 'state' of undefined
,请去检查你的插件是不是最新的2.15.2及以上才可以Redux DevTools 2.15.3
Redux DevTools的使用方式如下
import { createStore,applyMiddleware,compose } from "redux";
import thunk from "redux-thunk";
import reducers from "./reducer";
const store = createStore(reducers,compose(
applyMiddleware(thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f
))
第二:使用@符号连接connect
最上面已经有安装说明了。下面演示怎么用。
import {connect} from 'react-redux
@connect(
// 你需要state 的什么属性
state=>{ state.user console.log(state)},
{regisger} // 你需要的什么方法放到props里面
)