环境准备
确保你的环境满足以下要求：
Mock
本项目借助 Apifox 的云端mock功能实现mock请求，接口文档：soybean-admin-mock
VSCode插件
本项目推荐使用 VSCode 进行开发，项目里面已内置 VSCode 配置，包含推荐的插件和设置。
以下为推荐的插件：
- Auto Close Tag - 自动添加 HTML/XML 结束标签
- Auto Complete Tag - 为 HTML/XML 添加关闭标签和自动重命名成对的标签
- Auto Rename Tag - 自动重命名成对的 HTML/XML 标签
- Color Highlight - 颜色高亮插件
- DotENV - 高亮.env 文件
- EditorConfig for VS Code - 统一不同编辑器的一些配置
- ESLint - 代码检查
- Git Graph - Git 图形化操作工具
- GitLens — Git supercharged - 显示具体某行代码的 git 信息
- Icônes - 搜索 iconify 图标的插件
- Iconify IntelliSense - Iconify 图标实时显示的插件
- i18n Ally - i18n 国际化插件
- javascript console utils - 提供快捷键 ctrl+l 直接输入 console.log()
- Material Icon Theme - 图标主题，显示文件和文件多种图标
- One Dark Pro - 主题
- Prettier - Code formatter - 代码格式化插件
- UnoCSS - unocss 写法提示插件
代码获取
从 GitHub 获取代码
git clone https://github.com/soybeanjs/soybean-admin-react从 Gitee 获取代码
git clone https://gitee.com/mufeng889/react-soybean-admin.git💡
Tip
最新版本的代码以 github 为准。
安装依赖
安装项目依赖
pnpm inpm scripts
{
// 构建打包(prod环境)
"build": "vite build --mode prod",
// 构建打包(test环境)
"build:test": "vite build --mode test",
// 删除主项目及子项目的 node_modules, dist, pnpm-lock.yaml
"cleanup": "sa cleanup",
// 提交代码 (生成符合 Conventional Commits standard 的提交信息)
"commit": "sa git-commit",
// 本地运行(test环境)
"dev": "vite --mode test",
// 本地运行(prod环境)
"dev:prod": "vite --mode prod",
// 生成路由并且生成一个基础的路由文件
"gen-route": "sa gen-route",
// eslint检查并自动修复
"lint": "eslint . --fix",
// 初始化 simple-git-hooks
"prepare": "simple-git-hooks",
// 本地环境预览构建后的dist
"preview": "vite preview",
// 发布
"release": "sa release",
// react文件的ts检查
"typecheck": "tsc --noEmit --skipLibCheck",
// 更新依赖包
"update-pkg": "sa update-pkg"
}目录说明
- extensions.json//vscode推荐的插件
- launch.json//debug配置文件(debug React 和 TS)
- settings.json//vscode配置(在该项目中生效，可以复制到用户配置文件中)
- proxy.ts//网络请求代理
- index.ts//插件汇总
- router.ts//elegant-router插件
- unocss.ts//unocss插件
- unplugin.ts//自动导入UI组件、自动解析iconify图标、自动解析本地svg作为图标
- axios//网络请求封装
- color-palette//颜色调色板
- hooks//组合式函数hooks
- materials//组件物料
- ofetch//网络请求封装
- scripts//脚本
- utils//工具函数
- uno-preset//uno-preset配置
- utils//工具函数
- favicon.svg//网站标签图标
- imgs//图片
- svg-icon//本地svg图标
- components//全局组件
- app.ts//app常量
- business.ts//业务常量
- common.ts//通用常量
- reg.ts//正则常量
- hooks//hooks
- animate//动画模块
- antdConfig//ant design 相关的配置
- auth//权限模块
- form//表单模块
- lang//语言模块
- menu//菜单模块
- router//路由模块
- tab//标签页模块
- table//表格模块
- theme//主题模块
- base-layout//基础布局组件(包含全局头部、多页签、侧边栏、底部等公共部分)
- langs//语言文件
- dayjs.ts//dayjs的国际化配置
- locale.ts//语言文件汇总
- antd.ts//Ant Design的国际化配置
- _builtin//系统内置页面：异常页等
- (base)//基本布局
- (blank)//空白布局
- error.tsx//全局错误页
- index.tsx//根路由
- layout.tsx//全局布局组件 主要用来进行路由鉴权
- error.tsx//全局错误页
- loading.tsx//全局loading
- assets.ts//各种依赖的静态资源导入(css、scss等)
- dayjs.ts//dayjs插件
- iconify.ts//iconify插件
- nprogress.ts//顶部加载条nprogress插件
- elegant//elegant-router插件生成的路由声明、导入和转换等文件
- index.ts//路由插件入口
- request//封装的请求函数
- store//redux状态管理
- css//css
- scss//scss
- settings.ts//主题默认配置及覆盖配置
- vars.ts//主题token对应的css变量
- api.d.ts//请求接口返回的数据的类型声明
- app.d.ts//应用相关的类型声明
- common.d.ts//通用类型声明
- components.d.ts//自动导入的组件的类型声明
- elegant-router.d.ts//插件elegant-router生成的路由声明
- env.d.ts//react路由描述和请求环境相关的类型声明
- antd.d.ts//Ant Design类型
- router.d.ts//路由描述的类型声明
- storage.d.ts//本地缓存的数据类型
- union-key.d.ts//联合类型
- common//通用工具函数
- icon//图标相关工具函数
- service//请求服务配置相关的工具函数
- storage//存储相关工具函数
- App.tsx//React文件入口
- main.tsx//项目入口TS文件
- .editorconfig//统一编辑器配置
- .env//环境文件
- .env.prod//生产环境的环境文件
- .env.test//测试环境的环境文件
- .gitattributes//git属性配置
- .gitignore//忽略git提交的配置文件
- .npmrc//npm配置
- CHANGELOG.md//项目更新日志
- eslint.config.js//eslint flat配置文件
- index.html//html文件
- package.json//npm依赖描述文件
- pnpm-lock.yaml//npm包管理器pnpm依赖锁定文件
- README.md//项目介绍文档
- README.zh-CN.md//项目介绍文档(中文)
- tsconfig.json//TS配置
- uno.config.ts//原子css框架unocss配置
- vite.config.ts//vite配置
Last updated on