React+MobX+axios实现权限管理

1.环境配置

1）安装脚手架到全局 npm i create-react-app -g

2）安装mobx

    2.1进行配置文件抽离 npm run eject

    2.2 安装mobx和mobx-react这两个包  npm i mobx mobx-react

（mobx:状态管理工具）（mobx-react是做数据分片和数据获取）

 3）.配置装饰器

npm i babel-plugin-transform-decorators-legacy -D @babel/preset-env -D babel-plugin-transform-class-properties -D @babel/plugin-proposal-decorators -D
 

 4）.配置package.json

   "babel": {
	    "plugins": [
	      [
	        "@babel/plugin-proposal-decorators",
	        {
	          "legacy": true
	        }
	      ],
      "transform-class-properties"
    ],
    "presets": [
      "react-app",
      "@babel/preset-env"
    ]
    },

  注意： 以下两个配置顺序不可更改
     [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "transform-class-properties"

复制babel到下图：

 

5）.安装axios npm i axios

2.项目架构

src：

        api：统一管理接口

        assets：存放资源文件（css,js,image,font）

        components：组件文件

        pages：页面级组件

        store：状态管理相关的文件（mobx）

        util：工具文件

        index.js：入口文件

3.扩展工具补充

3.1安装antd npm i antd

3.2在App.css引入css  @import '~antd/dist/antd.css‘

例子：你需要一个普通蓝色按钮，效果如图：

 你只需要在App.js中解构这个按钮即可，App.js代码如下：

import './App.css';
import {Button} from 'antd'

function App() {
  return (
    <div className="App">
      <Button type="primary">按钮</Button>
    </div>
  );
}

export default App;

3.3 别忘记下载路由

npm i react-router-dom@5.3