Semi-Admin

基于 Semi-Design 实现的后台脚手架，具备 路由/登录/权限/mock等基本功能

依赖

react v17.0.2

typescript v4.5.3

semi-disign v2.1.5

react-router v6

axios v0.24.0

安装

git clone https://github.com/nieoding/semi-admin.git my-project
cd my-project
yarn install

国内网络可使用cnpm淘宝镜像加速安装

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install

指令

# 运行
npm run start
# 发布
npm run build
# 发布包分析
npm run build --report

界面截图

登录

登录账号 admin/admin

列表页

编辑页

目录结构

.
├── README.md
├── config-overrides.js             # 扩展配置（alias在这里配置）
├── package-lock.json               
├── package.json                    # 基础项目配置
├── public
├── src
│   ├── App.test.tsx
│   ├── App.tsx                     # 入口程序
│   ├── api                         # 远程接口
│   ├── components
│   │   └── semi-ext                # semi扩展库
│   ├── config
│   │   ├── app.config.tsx          # 应用配置
│   │   └── router.config.tsx       # 路由配置
│   ├── index.css
│   ├── index.tsx
│   ├── layouts
│   │   ├── app.tsx                 # 登录态页面布局
│   │   └── blank.tsx               # 非登录态页面布局
│   ├── mock                        # 本地mock数据
│   ├── react-app-env.d.ts
│   ├── reportWebVitals.ts
│   ├── setupTests.ts
│   ├── store                       # 共享数据
│   ├── utils
│   │   ├── auth.tsx                # 权限相关
│   │   ├── request.tsx             # axios封装
│   │   ├── router.tsx              # 路由、菜单相关
│   │   └── theme.tsx               # 换肤
│   └── views                       # 页面目录
├── tsconfig.json
└── tsconfig.paths.json             # alias在这里配置（IDE需要使用）