快速搭建React+Ant前端后台管理系统项目：React+AntDesign+ts

2022~07~21，晴，闷热的不行，大早上下地铁就看到了一个身材巨好穿着超短裙的美女，心情美滋滋。废话不多说，上步骤：

1：桌面随便新建一个文件夹，用来存放项目，我的叫my-react

2：打开my-react文件夹，在路径中输入cmd，然后回车

3：然后输入命令：create-react-app project(你想起的项目名称)

4：此时执行npm start就可以运行项目了，但是虽然项目已经运行成功，但是在项目目录里是找不到webpack配置项的。比如，我们想配置less、sass、配置项目接口请求等，这时我们需要做一个操作：展开项目（eject）
注意：这个一个不可逆过程，一旦执行了，就不能回到初始化。
cd进入到project目录中、执行eject解压配置命令：npm run eject

再看项目结构，此时已多了一些其他目录，展开config目录，里面就有webpack配置文件以及其他各种配置

5：安装less配置

vue-cli 构建的项目默认是不支持 less 的，需要自己添加

运行命令：npm install less less-loader --save-dev

6：安装路由组件router：npm install react-router-dom

7：添加状态管理mobx。mobx是做状态管理的，mobx-react是做数据分片和数据获取

npm install mbox mbox-react。

npm install babel-plugin-transform-decorators-legacy

修改package.json文件中的 babel 参数

添加下面代码：

 "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]

8：数据请求axois，安装axios库：

9：引入使用最多的react UI库ant design：npm instal antd

10：安装ts：npm install --save typescript @types/node @types/react @types/react-dom @types/jest

一切安装完毕，运行项目：npm start

---------------------------------------------------------分---隔---线-------------------------------------------------------

1：在src文件夹下新建api、components、pages、router文件夹

2：在pages新建login和index文件夹，分别新建login.js和index.js文件

index.js代码：

import React, { Component } from "react";
import { Layout, Switch, Menu } from "antd";
// import { RenderRoutes } from "../../router/utils";
import { Link } from "react-router-dom";
// require("./index.less");

const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

class Index extends Component {
  state = {
    collapsed: false,
    theme: "dark",
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };
  render() {
    const { collapsed } = this.state;
    let { routes } = this.props;
    console.log(routes);
    return (
      <Layout style={
   
   { minHeight: "100vh" }}>
        <Sider
          theme={this.state.theme}
          collapsible
          collapsed={collapsed}
          onCollapse={this.onCollapse}
        >
          <div className="logo" />
          <Menu
            theme={this.state.theme}
            defaultSelectedKeys={["/user/experience"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
          >
            <Menu.Item key="1">
              <Link to="/user/WorkBench">工作台</Link>
            </Menu.Item>
            <SubMenu key="sub1" title="用户管理">
              <Menu.Item key="/user/experience">
                <Link to="/user/experience">体验用户</Link>
              </Menu.Item>
              <Menu.Item key="4">VIP用户</Menu.Item>
              <Menu.Item key="5">
                <Link to="/user/Details">用户详情</Link>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="ant-layout-header" style={
   
   { background: "#fff" }}>

          </Header>
          <Content style={
   
   { margin: "16px 16px" }}>
            {/* <RenderRoutes routes={routes}></RenderRoutes> */}
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default Index;

import React, { Component } from "react";
// require("./index.less");
class Login extends Component {
  render() {
    return (
      <div className="main-page">
        登录页
      </div>
    );
  }
}
export default Login ;

在这个步骤有可能会报如下错误，不要慌

原因：这些报错原因均为'Switch' 和'Redirect' 是react-router 5版本的接口，在项目中的package.json中查看你的react-router-dom版本，版本是"react-router-dom": "^6.x.x"。新版并且已经将Switch改为Routes。

解决办法有二：

1.将所有 Switch 改为 Routes，Redirect 改为 Navigate ，withRouter改为 useNavigate

（vscode中，按快捷键：CTRL+F及可查找替换）

2.卸载新版本，再安装5的版本

npm uninstall react-router-dom
npm install react-router-dom@5

我直接使用的第二个，卸载了新版本，重新装了5的版本，就没问题了

3：在router文件夹下新建router.js和allocation.js

router.js代码

import Login from '../pages/login/login'
import Index from '../pages/index/index'
// 菜单相关路由
export const menus = []
//登录、首页、404路由
export const main = [
    { path: '/login', exact: true, name: '登录', component: Login },
    { path: '/',  name: '首页', component: Index, routes: menus },
]

export const routerExport =  {
    main, menus
}

allocation.js代码：

import React from 'react';
import { Route, Link, Switch, Redirect } from "react-router-dom";

export const SubRoutes = route => (<Route
    path={route.path}
    exact={route.exact}
    render={props =>{
        return (
            route &&( route.Redirect ? (<Redirect to={route.Redirect}></Redirect>) :
            (<route.component {...props} routes={route.routes} />))
        )
    }}
/>
);

export const RenderRoutes = ({routes}) => {return <Switch> {(routes.map((route, i) =>  <SubRoutes key={i} {...route} />))} </Switch> };

4：到app.js配置

app.js代码

// import logo from './logo.svg';
import './App.css';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import { BrowserRouter as Router } from "react-router-dom";
import { main as mainConfig } from "./router/router";
import { RenderRoutes } from "./router/allocation";

function App () {
  return (
    <Router>
      <div className="App">
        <RenderRoutes routes={mainConfig}></RenderRoutes>
      </div>
    </Router>
  );
}

export default App;

5：接下来输入http://localhost:3000/login和http://localhost:3000就能看到首页和登录页了

6：接着对index布局，采用antD的layout组件
index.js代码：

import React, { Component } from "react";
import { Layout, Switch, Menu } from "antd";
// import { RenderRoutes } from "../../router/utils";
import { Link } from "react-router-dom";
// require("./index.less");

const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;

class Index extends Component {
  state = {
    collapsed: false,
    theme: "dark",
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  changeTheme = (value) => {
    this.setState({
      theme: value ? "dark" : "light",
    });
  };
  render() {
    const { collapsed } = this.state;
    let { routes } = this.props;
    console.log(routes);
    return (
      <Layout style={
   
   { minHeight: "100vh" }}>
        <Sider
          theme={this.state.theme}
          collapsible
          collapsed={collapsed}
          onCollapse={this.onCollapse}
        >
          <div className="logo" />
          <Menu
            theme={this.state.theme}
            defaultSelectedKeys={["/user/experience"]}
            defaultOpenKeys={["sub1"]}
            mode="inline"
          >
            <Menu.Item key="1">
              <Link to="/user/WorkBench">工作台</Link>
            </Menu.Item>
            <SubMenu key="sub1" title="用户管理">
              <Menu.Item key="/user/experience">
                <Link to="/user/experience">体验用户</Link>
              </Menu.Item>
              <Menu.Item key="4">VIP用户</Menu.Item>
              <Menu.Item key="5">
                <Link to="/user/Details">用户详情</Link>
              </Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout className="site-layout">
          <Header className="ant-layout-header" style={
   
   { background: "#fff" }}>

          </Header>
          <Content style={
   
   { margin: "16px 16px" }}>
            {/* <RenderRoutes routes={routes}></RenderRoutes> */}
          </Content>
        </Layout>
      </Layout>
    );
  }
}
export default Index;

接下来输http://localhost:3000就能看到首页了

快速搭建React+Ant前端后台管理系统项目：React+AntDesign+ts

猜你喜欢