React+MobX+axios实现权限管理

最新推荐文章于 2023-10-10 23:15:00 发布

松鼠不吃胖鲤鱼

最新推荐文章于 2023-10-10 23:15:00 发布

阅读量481

点赞数 1

分类专栏： React 文章标签： react.js npm 前端

本文链接：https://blog.csdn.net/qq_42505615/article/details/121136221

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍如何使用Create React App脚手架快速搭建React项目，并通过配置实现MobX状态管理及装饰器支持。此外，还涉及了项目目录结构设计、Axios安装及Ant Design组件库的应用。

摘要由CSDN通过智能技术生成

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