mantis-react-admin
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMantis React Admin
Mantis React 后台管理系统
A free React admin dashboard with Material UI v7, React 19, Vite 7, and MUI X Charts.
一款基于Material UI v7、React 19、Vite 7和MUI X Charts的免费React后台管理仪表盘。
Tech Stack
技术栈
- Framework: React 19
- Build Tool: Vite 7
- UI Library: Material UI v7, MUI X Charts
- Styling: Emotion CSS-in-JS
- Routing: React Router v7
- State: SWR for data fetching
- Package Manager: yarn
- Output: directory
dist - Dev Port: 5173
- 框架:React 19
- 构建工具:Vite 7
- UI组件库:Material UI v7、MUI X Charts
- 样式方案:Emotion CSS-in-JS
- 路由:React Router v7
- 状态管理与数据获取:SWR
- 包管理器:yarn
- 输出目录:
dist - 开发端口:5173
Setup
安装步骤
1. Clone the Template
1. 克隆模板
bash
git clone --depth 1 https://github.com/Eng0AI/mantis-react-admin-template.git .If the directory is not empty:
bash
git clone --depth 1 https://github.com/Eng0AI/mantis-react-admin-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_templatebash
git clone --depth 1 https://github.com/Eng0AI/mantis-react-admin-template.git .如果目标目录非空:
bash
git clone --depth 1 https://github.com/Eng0AI/mantis-react-admin-template.git _temp_template
mv _temp_template/* _temp_template/.* . 2>/dev/null || true
rm -rf _temp_template2. Remove Git History (Optional)
2. 移除Git历史记录(可选)
bash
rm -rf .git
git initbash
rm -rf .git
git init3. Install Dependencies
3. 安装依赖
bash
yarn installbash
yarn installBuild
构建
bash
yarn buildbash
yarn buildDeploy
部署
Vercel (Recommended)
Vercel(推荐)
bash
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKENbash
vercel pull --yes -t $VERCEL_TOKEN
vercel build --prod -t $VERCEL_TOKEN
vercel deploy --prebuilt --prod --yes -t $VERCEL_TOKENNetlify
Netlify
bash
netlify deploy --prod --dir=distbash
netlify deploy --prod --dir=distDevelopment
开发
bash
yarn startOpens at http://localhost:5173
bash
yarn start启动后访问 http://localhost:5173
Linting
代码检查与格式化
bash
yarn lint # Check for issues
yarn lint:fix # Auto-fix issues
yarn prettier # Format codebash
yarn lint # 检查代码问题
yarn lint:fix # 自动修复问题
yarn prettier # 格式化代码