# stdFrontCms

**Repository Path**: chenxiaoyi27/std-front-cms

## Basic Information

- **Project Name**: stdFrontCms
- **Description**: 标准管理系统工程。使用react-router做微前端方案，使用create-react-app搭建工程。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-22
- **Last Updated**: 2021-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

效果图
=========================

<img src="./README.png" />

项目介绍
=========================
![](https://img.shields.io/badge/REACT-17.X-orange)
![](https://img.shields.io/badge/REACT__DOM-17.X-orange)
![](https://img.shields.io/badge/ANTD-4.X-orange)
![](https://img.shields.io/badge/WEBPACK-5.X-orange)

本项目是使用create-react-app搭建的PC端，主要涉及技术框架有：**React@17.X.X**、**Antd@4.X.X**。

使用React-Router实现SPA的微前端模板工程。




代码运行
=========================

> yarn 安装依赖包

> yarn start 启动项目

> yarn build 打包项目


webpack配置
========================
在根目录craco.config.js中调整。

其中alias别名和proxy代理配置，提出到/config/alias.js和/config/proxy.js中去配置。

开发
========================

路由：

```js
import { withRouter } from 'react-router-dom';
export default withRouter(AddrQuery);
```

页面跳转：


```js
this.props.history.push({
    pathname: '/addNorm',
    state: {
        aaa: '1'
    }
})
```

代码目录结构
=========================

```
react-micro-front
├─ .eslintrc
├─ .gitignore
├─ config       //webpack配置
│  ├─ alias.js  //webpack别名配置
│  └─ proxy.js  //webpack代理配置
├─ craco.config.js  //修改webpack配置
├─ package.json
├─ public
│  ├─ favicon.ico
│  ├─ index.html
│  ├─ logo192.png
│  ├─ logo512.png
│  ├─ manifest.json
│  └─ robots.txt
├─ README.md    //工程说明
├─ README.png
└─ src
   ├─ App.css
   ├─ App.js
   ├─ App.test.js
   ├─ common
   │  ├─ components     //公共组件
   │  │  ├─ formItems   //表单项组件
   │  │  │  └─ index.js
   │  │  └─ sqlInput    //sql输入控件
   │  │     └─ index.js
   │  ├─ constants.js   //常量申明
   │  ├─ images         //图片文件夹
   │  ├─ renderComp.js  //表单渲染组件
   │  └─ utils.js       //公共方法
   ├─ frame             //App.js使用的框架页面
   │  ├─ index.js
   │  ├─ index.less
   │  └─ list.js        //框架菜单列表
   ├─ global.less       //全局样式类
   ├─ index.css
   ├─ index.html
   ├─ index.js          //入口
   ├─ logo.svg
   ├─ project.js        //请求地址申明
   ├─ reducers          //redux的reducer申明
   │  └─ index.js
   ├─ reportWebVitals.js
   ├─ router            //路由
   │  ├─ index.js
   │  ├─ loadable.js
   │  └─ loading        //切换路由页面加载中组件
   │     ├─ index.js
   │     └─ index.less
   ├─ service
   │  ├─ http.js
   │  └─ index.js       //请求方法
   ├─ setupTests.js
   └─ views             //业务页面源代码
      ├─ example        //示例页
      │  ├─ example
      │  │  ├─ index.js
      │  │  └─ index.less
      │  └─ index.js    //业务模块路由申明
      └─ formDemo       //表单示例页
         ├─ formDemo
         │  ├─ config.js
         │  └─ index.js
         └─ index.js    //业务模块路由申明

```