react antd SPA 管理后台搭建

快来打我* 2024-04-17 17:33 64阅读 0赞

# react antd SPA 管理后台搭建 #

## 简介 ##

学习了前端主流的框架react基于 react antd 等搭建了一套后台项目的模板Github

## 环境 ##

*  OS: Windows10
 *  IDE: WebStorm 2019.1.3
 *  node: v10.15.0
 *  npm: 6.4.1
 *  yarn: 1.17.3
 *  browser: Chrome76.0.3809.100

## 依赖 ##

*  react@16.8.6
 *  react-router@5.0.1(路由)
 *  react-redux@4.0.4(状态容器)
 *  antd@3.21.1(UI框架)
 *  axios@0.19.0(基于 promise 的 HTTP 库)
 *  BizCharts@3.5.5(可视化图表)
 *  moment@2.24.0(处理时间工具)
 *  echarts@4.1.0(可视化图表)
 *  braft-editor@2.3.7(富文本编辑器)
 *  react-draft-wysiwyg@1.12.13(基于react的富文本封装)
 *  react-sortable-hoc@0.7.2(简单的拖拽模块)

## 创建项目 ##

# 安装 create-react-app
    $ npm install -g create-react-app
    
    # 安装 yarn
    $ npm install -g yarn
    
    # 使用 create-react-app 创建脚手架工程
    $ create-react-app my-app
    
    # 进入项目目录启动项目访问本地localhost:3000端口
    $ yarn start
    
    # 安装依赖
    $ yarn add antd react-router-dom less less-loader babel-plugin-import braft-editor
    
    # 暴露项目配置
    $ yarn eject

## 配置项目 ##

### Less 解析配置 ###

# 修改 config/webpack.config.js 文件
    
    # 在 45 行添加如下配置
    const lessRegex = /\.less$/;
    const lessModuleRegex = /\.module\.less$/;
    
    # 在 sassRegex 下方大约 457 行添加配置
    
    // Less 解析配置
    {
        test: lessRegex,
        exclude: lessModuleRegex,
        use: getStyleLoaders(
            {
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
            },
            'less-loader'
        ),
        sideEffects: true,
    },
    {
        test: lessModuleRegex,
        use: getStyleLoaders(
            {
                importLoaders: 2,
                sourceMap: isEnvProduction && shouldUseSourceMap,
                modules: true,
                getLocalIdent: getCSSModuleLocalIdent,
            },
            'less-loader'
        )
    },
    
    # 修改 package.json 找到babel 配置项处添加如下配置注意前面的逗号
    
    ,
    "plugins": [
      [
        "import",
        {
          "libraryName": "antd",
          "style": "css"
        }
      ]
    ]

项目大致搭建完成后续的一些功能待完善