代码拉取完成,页面将自动刷新
同步操作将从 sxfad/react-admin 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于React17.x、Ant Design4.x的管理系统架构。
yarn
注:如果由于网络等原因安装不成功,可以尝试 tyarn
或 cnpm
或 npm
设置环境变量,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!
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。