//拉取代码
git clone https://github.com/lhc0229/react-admin.git
//安装依赖
npm i
//启动
npm run dev对react的状态管理进行了极简的封装，使你能简单的使用状态管理，免去那些繁琐的代码，提高了代码可读性
在函数组件中使用状态管理
import { useSelector, useDispatch } from 'react-redux'
import { user_unique } from "@/store/modules/user";
const Demo = ()=>{
const dispatch = useDispatch()
const user_info = useSelector((state) => {
return state.user
})
dispatch({type:user_unique,data:{token:'89'}}) //更新状态值
console.log(user_info.token) //获取store->modules->user 的token值
return <div>123</div>
}|-- react-admin
|-- public
| |-- favicon.ico
| |-- index.html
| |-- logo192.png
| |-- logo512.png
| |-- manifest.json
| |-- robots.txt
|-- src
|-- index.js
|-- logo.svg
|-- permission.js // 路由守卫
|-- reportWebVitals.js
|-- setupTests.js
|-- api
| |-- user.js // 接口
|-- assets
| |-- 404.png
|-- components // 全局组件
| |-- Loading
| | |-- Loading.js
| |-- SvgIcon // SVG加载组件
| | |-- index.js
| | |-- style.less
| |-- Template
| |-- index.js
|-- components-bus
|-- env
| |-- index.js // 全局环境变量配置
|-- global-funcition
| |-- index.js // 全局函数
|-- global-map
| |-- index.js // 全局映射
|-- icons
| |-- index.js
| |-- svg // svg静态资源文件夹
| |-- show-html.svg
|-- layout
| |-- index.js
| |-- back-layout // 后台布局页面
| |-- index.js
| |-- style.less
| |-- breadcrumb // 面包屑
| | |-- index.js
| | |-- style.less
| |-- sidebar // 侧边导航栏
| |-- index.js
| |-- style.less
|-- router
| |-- index.js // 全局路由
|-- store // 状态管理
| |-- index.js
| |-- modules
| |-- app.js
| |-- user.js
|-- style
| |-- global.less // 全局样式
| |-- icon.less // 需要对导入每个svg设置宽高
| |-- index.less
| |-- custom-component // 对antd组件进行全局样式重置的组件
| |-- button.less
|-- tool-library //第三方的引用
| |-- router
| |-- index.js //封装了一个类似vue路由使用
|-- utils
| |-- lazyLoading.js // 组件懒加载实现
| |-- request.js // 全局axios请求封装
| |-- token.js // token设置
|-- views
|-- 404
| |-- index.js
| |-- style.less
|-- backstage // 后台页面文件夹
| |-- dashboard
| |-- index.js
| |-- style.less
|-- front // 前台页面文件夹
|-- login
|-- index.js
|-- .env.development
|-- .env.production
|-- .gitignore
|-- README.md
|-- config-overrides.js // webpack配置
|-- package-lock.json
|-- package.json
使用svg-sprite-loade处理svg时，导致svg的原有的宽高丢失，这个暂时没有解决，只能是对每一个svg单独的设置宽高，目前还没有确定是什么问题，请期待后续更新目前还没有配置eslint，后续将会更新配置eslint
CLI
后续有计划实现一个cli,一键拉取项目
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent