yarn add react-app-rewired customize-cra //使用装饰器引入ant组件
1、项目/config-overrides.js
const {
override
} = require("customize-cra")
module.exports=override(
)
/* package.json */
"scripts": {
- "start": "react-scripts start",
+ "start": "react-app-rewired start",
- "build": "react-scripts build",
+ "build": "react-app-rewired build",
- "test": "react-scripts test",
+ "test": "react-app-rewired test",
}
2、重启项目
3、配置less
npm install less less-loader -D
const {
override,
addLessLoader
} = require("customize-cra")
module.export=override(
addLessLoader({
javascriptEnabled: true
})
)
4、引入ant组件库
//按需引入
yarn add babel-plugin-import
//引入组件库
yarn add antd
const {
override,
addLessLoader,
fixBabelImports
} = require("customize-cra")
module.exports=override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true
})
)
5、定制主题
module.exports={
"@primary-color": "#52c41a", // 全局主色
"@link-color": "#1890ff",// 链接色
"@success-color": "#52c41a" // 成功色
}
const {
override,
addLessLoader,
fixBabelImports
} = require("customize-cra")
//引入定制的颜色 在页面调用就可以使用了
const modifyVars=require("./antD")
module.exports=override(
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars
})
)
6、进行符合装饰器的配置
yarn add @babel/plugin-proposal-decorators
const {
override,
addLessLoader,
fixBabelImports,
addDecoratorsLegacy,
} = require("customize-cra")
const modifyVars=require("./antD")
module.exports=override(
addDecoratorsLegacy(),
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: true,
}),
addLessLoader({
javascriptEnabled: true,
modifyVars
})
)
//直接在页面使用高阶组件装饰器就可以了
@testHoc
class App extends Component {
render() {
return (
App
)
}
}
空文件夹文件不会跟踪
7、外层路由的配置(Login/404页面)
yarn add react-router-dom
外层路由的配置
import React, { Component } from 'react'
import { render } from "react-dom"
import App from "./App"
import { BrowserRouter as Router, Route , Switch, Redirect} from "react-router-dom"
import {mainRouter} from "./routes"
render(
//权限 需要登录才能访问admin
return
}}>
{
mainRouter.map(route=>{
return path={route.pathname} component={route.component} key={route.pathname} > }) } , document.querySelector("#root") ) import React, { Component } from 'react' import { Route , Switch, Redirect} from "react-router-dom" import { adminRouter } from "./routes" class App extends Component { render() { return ( { adminRouter.map(router=>{ return ( path={router.pathname} key={router.pathname} render={(routerProps)=>{ return }} exact={router.exact} /> ) }) } 8、内层路由的配置(admin)
)
}
}
export default App
9、路由的懒加载
import 返回一个promise
yarn add react-loadable
import Loadable from "react-loadable"
import { Loading } from "../components"
// import Dashboard from "./Dashboard"
// import Login from "./Login"
// import Settings from "./Settings"
// import AriticleList from "./Ariticle"
// import Edit from "./Ariticle/Edit"
// import NotFound from "./NotFound"
const Dashboard=Loadable({
loader:()=>import("./Dashboard"),
loading:Loading
})
const Login=Loadable({
loader:()=>import("./Login"),
loading: Loading
})
const Settings=Loadable({
loader:()=>import("./Settings"),
loading: Loading
})
const AriticleList=Loadable({
loader:()=>import("./Ariticle"),
loading: Loading
})
const Edit=Loadable({
loader:()=>import("./Ariticle/Edit"),
loading: Loading
})
const NotFound=Loadable({
loader:()=>import("./NotFound"),
loading: Loading
})
export {
Dashboard,
Login,
Settings,
AriticleList,
Edit,
NotFound
}
10、在App中引入模板，并将路由在组件中渲染 （通过this.props.children）
import React, { Component } from 'react'
import { Route , Switch, Redirect} from "react-router-dom"
import { adminRouter } from "./routes"
import { Frame } from "./components"
const menu=adminRouter.filter(route=>route.isNav===true)
class App extends Component {
render() {
return (
{
adminRouter.map(router=>{
return (
path={router.pathname} key={router.pathname} render={(routerProps)=>{ return }} exact={router.exact} /> ) }) } ) } } export default App 使用 menu 的onCLick方法获取参数中的key 使用withRouter高阶组件 使组件拥有路由参数 this.props.history.push（key）实现路由的跳转 mode="inline" selectedKeys={[this.props.location.pathname]} defaultOpenKeys={['sub1']} style={{ height: '100%', borderRight: 0 }} onClick={this.onClickRoute.bind(this)} >11、组件之间基本的路由跳转
12、实现自动选中