插入自定义主题
引入依赖包antd按需打包插入自定义样式(.js)config-overriders.js需要下载的依赖包(babel-plugin-import, antd, customize-cra, react-app-rewired)css是对less文件的封装
需要添加修改的内容
config
-overriders
.js包
const { override
, fixBabelImports
, addLessLoader
} = require('customize-cra');
module
.exports
= override(
fixBabelImports('import', {
libraryName
: 'antd',
libraryDirectory
: 'es',
style
: true,
}),
addLessLoader({
javascriptEnabled
: true,
modifyVars
: {'@primary-color' : '#1DA57A'}
})
);
package.json包
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
引入路由
引入依赖包react-router-dom引入组件{BrowserRouter, Router}或者{HashRouter, Router}，区别在于有无＃配置路由路径和路由组件----(包括登录组件，admin等等)
<BrowserRouter
>
<Switch
>
<Route path
='/login' component
={Login
}></Route
>
<Route path
='/' component
={Admin
}></Route
>
</Switch
>
</BrowserRouter
>
设置登录界面
设置全局样式---[在public包中添加全局样式Css](https://github.com/jgthms/minireset.css/blob/master/minireset.css)
设置登录Login{（1）在Css中添加body样式和id样式}
1. login
.jsx核心代码
<div className
="login">
<header className
="login-header">
<img src
={logo
} alt
="logo"/>
<h1
>React项目
: 后台管理系统
</h1
>
</header
>
<section className
="login-content"></section
>
</div
>
2. login
.less核心代码
.login
{.login
-header
{img
{}h1
{}}.login
-content
{}}
