react+mobx+router+axios+antd搭建单页应用

Radinka ·

更新时间:2024-11-14

· 750 次阅读

react+mobx+router+axios+antd搭建单页应用创建项目基础框架1. npm 全局安装 create-react-app2. 使用 create-react-app 创建项目3. 进入创建的项目中，弹出配置添加依赖1. 添加less依赖2. 添加路由依赖（React Router）3. 添加状态管理依赖（MobX ）4. 添加Http请求依赖（Axios）5. 添加UI框架依赖（Ant Design） 创建项目 基础框架 1. npm 全局安装 create-react-app

npm install -g create-react-app

2. 使用 create-react-app 创建项目

在指定的目录下使用命令,创建名为myApp的项目

crate-react-app myApp

3. 进入创建的项目中，弹出配置

yarn eject

添加依赖 1. 添加less依赖

yarn add less less-loader

修改 webpack配置文件
找到 webpack.config.js 文件，修改
第一处：

// style files regexes
//const cssRegex = /\.css$/;  //修改前
const cssRegex = /\.(css|less)$/;  //修改后
const cssModuleRegex = /\.module\.css/;

第二处：

{
  loader: require.resolve('css-loader'),
  options: cssOptions,
},
//添加以下配置
{
  loader: require.resolve('less-loader'),// compiles Less to CSS
  options: cssOptions,
},

2. 添加路由依赖（React Router）

React Router 是完整的 React 路由解决方案。react-router api文档
React Router 保持 UI 与 URL 同步。它拥有简单的 API 与强大的功能例如代码缓冲加载、动态路由匹配、以及建立正确的位置过渡处理。你第一个念头想到的应该是 URL，而不是事后再想起。

yarn add react-router

3. 添加状态管理依赖（MobX ）

React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而MobX提供机制来存储和更新应用状态供 React 使用。Mobx介绍

yarn add mobx mobx-react babel-preset-mobx mobx-react-router

使用mobx需要添加装饰器(Decorator) es7 语法

yarn add @babel/plugin-proposal-decorators

同时需要修改package.json配置文件

  "babel": {
    "presets": [
      "react-app"
      //添加“"mobx"”
      ,
      "mobx"
    ]
    //在这里添加
    ,
    "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
  }

4. 添加Http请求依赖（Axios）

yarn add axios

非必须的请求代理功能，可以在开发时请求后台数据更加方便，解决浏览器跨域问题

yarn add http-proxy-middleware

在src目录下添加 setupProxy.js 文件

const {createProxyMiddleware} = require('http-proxy-middleware');
module.exports = function(app) {
    app.use(createProxyMiddleware('/xxx', {
        target: 'http://127.0.0.1:8080' ,
        secure: false,
        changeOrigin: true,
        pathRewrite: {
        	//替换请求路径
            "^/xxx": "/server-name"
        },
        // cookieDomainRewrite: "http://localhost:3000"
    }));
};

5. 添加UI框架依赖（Ant Design）

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。antd官网