1 Star 0 Fork 270

网络虫 / react-admin

forked from sxfad / react-admin 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

React Admin

基于React17.xAnt Design4.x的管理系统架构。

安装依赖

  • node v12.14.0
  • yarn 1.22.10
yarn

注:如果由于网络等原因安装不成功,可以尝试 tyarncnpmnpm

设置环境变量,windows平台可以使用 cross-env

开发启动

# 正常启动开发模式
yarn start 

# 自定义端口
PORT=3001 yarn start

# HTTPS 方式启动
HTTPS=true yarn start

开发代理

修改src/setupProxy.js

const proxy = require('http-proxy-middleware');

// 前端web服务代理配置
module.exports = function(app) {
    app.use(proxy('/api',
        {
            target: 'http://localhost:8081/', // 目标服务器
            pathRewrite: {
                '^/api': '', // 如果后端接口无前缀,可以通过这种方式去掉
            },
            changeOrigin: true,
            secure: false, // 是否验证证书
            ws: true, // 启用websocket
        },
    ));
};

生产构建

# 正常构建
yarn build

# 指定配置环境
REACT_APP_CONFIG_ENV=test yarn build

# 打包大小分析
yarn build:analyzer

# 打包时间分析
yarn build:time

样式

  • 支持less及css

  • src下less进行css module处理,css不进行css module处理

  • css module 应用样式写法

    import styles from './style.module.less';
    
    <div className={styles.root}>
        <h1 className={styles.title}></h1>
    </div>
  • 复杂的样式处理,推荐使用 classnames

  • 主题变量修改 theme.less antd 样式变量

作为乾坤子系统时

约定:package.json name 作为:

- 子系统的BASE_NAME 
- 子系统注册到主系统中的 name 、 activeRule
  • ajax请求前缀设置为 ${window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__}api

  • 接口服务器(后端按需设置)和 开发服务器devServer,设置跨域

    {
        headers: {
            'Access-Control-Allow-Origin': '*', // 'https://some-site.com'
            'Access-Control-Allow-Methods': '*', // 'GET, POST'
            'Access-Control-Allow-Headers': '*', // 'X-Requested-With,content-type, Authorization, token, auto-token'
        }
    } 
  • 子系统webpack配置

    // craco.config.js
    const packageName = require('./package.json').name;
    
    {
        configure: (webpackConfig, {env, paths}) => {
            webpackConfig.output.library = packageName;
            webpackConfig.output.libraryTarget = 'umd';
            webpackConfig.output.jsonpFunction = `webpackJsonp_${packageName}`;
        }
    }           

乾坤微前端的坑

-[ ] 子系统卸载时,控制台会报提醒 [qiankun] Set window.event while sandbox destroyed or inactive in xxx!

空文件

简介

基于React、Ant Design的管理系统架构。 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/wangluochong/react-admin.git
git@gitee.com:wangluochong/react-admin.git
wangluochong
react-admin
react-admin
master

搜索帮助