代码拉取完成,页面将自动刷新
同步操作将从 郭建强/react-antd-admin 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
基于react+ts+antd构建的管理后台脚手架模版
线上地址 http://g_guojq.gitee.io/react-antd-admin
git地址 https://github.com/guo-jianqiang/react-antd-admin
详情请查看little-deer-ui
记录用户使用的系统配置,缓存浏览器中,记录用户习惯.
使用antd-theme-webpack-plugin插件实现导出antd样式文件并绑定cssVariable,通过less.js 浏览器在线编译改变less variable 方法实现主题样式变更
@import "_var";
:root{
--primary-color: @primary-color;
--danger-color: red;
}
window.less.modifyVars(vars).then(() => {
if (vars['@primary-color'] === getItem(SYSTEM_CONFIG).primaryColor) return
message.success('主题色切换成功')
})
window.less.refreshStyles()
配置只需在routeItems文件中配置参数即可,如下
export interface RouteItem {
path: string
exact: boolean
meta: {
tabFixed?: boolean // 是否固定tab项
isCache?: boolean // 是否路由缓存
name: string
icon: Function | string
hidden?: boolean // 是否隐藏菜单
}
component: ComponentType
routes?: Array<RouteItem>
}
Layout组件中传入缓存控制函数,更多信息请查看react-router-cache-route
export interface aliveControlInterface {
dropByCacheKey: (cacheKey: string) => void // 清除缓存,仅当前页面路由和清除缓存路由不同时可使用
refreshByCacheKey: (cacheKey: string) => void // 刷新当前路由
getCachingKeys: () => Array<string> // 或者缓存路由key列表
clearCache: () => void // 清除所有缓存
}
使用cross-env设置环境变量,从而实现不同环境下的可配置化,配置获取来源为根目录下的env文件夹中获取(development.json、test.json、producation.json)
案例如下:
// development.json 同其他文件
{
"SERVER_URL": "www.baidu.com"
}
"scripts": {
"dev": "cross-env NODE_ENV=development webpack serve --config webpack/webpack.dev.ts",
"test": "cross-env NODE_ENV=test webpack serve --config webpack/webpack.dev.ts",
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.prod.ts"
},
plugins: [
new webpack.DefinePlugin({
"process.env.APP_CONFIG": JSON.stringify(envConfig)
})
....
]
yarn install
or
npm install
npm run dev
npm run build
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。