docs(projects): 更新README
This commit is contained in:
Soybean
parent
448d28db2e
commit
c950ae9c97
204
README.md
204
README.md
@ -4,17 +4,15 @@
|
|||||||
</a>
|
</a>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
|
[](LICENSE)
|
||||||
<h1>Soybean Admin</h1>
|
<h1>Soybean Admin</h1>
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 简介
|
## 简介
|
||||||
|
|
||||||
Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的插件，有着极高的代码规范，
|
Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的免费中后台模版，它使用了最新的前端技术栈，内置丰富的插件，有着极高的代码规范，开箱即用的中后台前端解决方案，也可用于学习参考。
|
||||||
|
|
||||||
开箱即用的中后台前端解决方案，也可用于学习参考。
|
|
||||||
|
|
||||||
## 特性
|
## 特性
|
||||||
|
|
||||||
@ -28,105 +26,105 @@ Soybean Admin 是一个基于 Vue3、Vite、Naive UI、TypeScript 的免费中
|
|||||||
|
|
||||||
- [soybean-admin](https://soybean.pro/)
|
- [soybean-admin](https://soybean.pro/)
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
|
||||||
## 目录规范
|
<img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/02.png">
|
||||||
|
|
||||||
```javascript
|
<img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/03.png">
|
||||||
soybean-admin
|
|
||||||
├── build //vite构建相关配置和插件
|
<img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/01.png">
|
||||||
│ ├── define //定义的全局常量，通过vite构建时注入
|
|
||||||
│ ├── env //.env环境文件内容加载插件
|
<img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/04.png">
|
||||||
│ └── plugins //构建插件
|
|
||||||
│ ├── html.ts //html插件(注入变量，压缩代码等)
|
<img alt="SoybeanAdmin" width="100%" src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/05.png">
|
||||||
│ ├── iconify.ts //iconify图标插件
|
|
||||||
│ ├── visualizer.ts //构建的依赖大小占比分析插件
|
</p>
|
||||||
│ ├── vue.ts //vue相关vite插件
|
|
||||||
│ └── windicss.ts //css框架插件
|
|
||||||
├── doc //项目相关说明文档
|
|
||||||
├── public //公共目录
|
### 使用 Gitpod
|
||||||
│ ├── resource //资源文件夹(打包后会保留到dist根目录)
|
|
||||||
│ └── favicon.ico //网站标签图标
|
在 Gitpod（适用于 GitHub 的免费在线开发环境）中打开项目，并立即开始编码.
|
||||||
├── src
|
|
||||||
│ ├── assets //静态资源
|
[](https://gitpod.io/#https://github.com/honghuangdc/soybean-admin)
|
||||||
│ ├── components //全局组件
|
|
||||||
│ │ ├── business //业务相关组件
|
## 文档
|
||||||
│ │ ├── common //公共组件
|
|
||||||
│ │ └── custom //自定义组件
|
[项目相关文档](./doc)
|
||||||
│ ├── context //全局上下文(通过provide和inject实现)
|
|
||||||
│ │ ├── app //从app.vue注入的上下文
|
## 安装使用
|
||||||
│ │ └── part //局部组件注入的上下文
|
|
||||||
│ ├── enum //TS枚举
|
- 克隆代码
|
||||||
│ │ ├── animate.ts //动画枚举
|
|
||||||
│ │ ├── business.ts //业务相关枚举
|
```bash
|
||||||
│ │ ├── common.ts //通用枚举
|
git clone https://github.com/honghuangdc/soybean-admin.git
|
||||||
│ │ ├── route.ts //路由相关枚举
|
|
||||||
│ │ ├── storage.ts //存储相关枚举
|
|
||||||
│ │ └── theme.ts //系统主题配置相关枚举
|
|
||||||
│ ├── hooks //组合式的钩子函数hooks
|
|
||||||
│ │ ├── business //业务相关hooks
|
|
||||||
│ │ └── common //通用hooks
|
|
||||||
│ ├── interface //TS类型接口
|
|
||||||
│ │ ├── business.ts //业务相关类型接口
|
|
||||||
│ │ ├── common.ts //通用类型接口
|
|
||||||
│ │ └── theme.ts //系统主题配置相关类型接口
|
|
||||||
│ ├── layouts //布局组件
|
|
||||||
│ │ ├── BasicLayout //基本布局(包含全局头部、侧边栏、底部等公共部分)
|
|
||||||
│ │ ├── BlankLayout //空白布局组件(单个页面)
|
|
||||||
│ │ └── RouterViewLayout //路由组件(用于多级路由之间的桥接)
|
|
||||||
│ ├── plugins //插件
|
|
||||||
│ │ └── dark-mode.ts //windicss暗黑模式插件
|
|
||||||
│ ├── router //vue路由
|
|
||||||
│ │ ├── modules //路由页面(按模块划分)
|
|
||||||
│ │ ├── permission //路由权限(路由守卫)
|
|
||||||
│ │ ├── routes //声明的路由
|
|
||||||
│ │ └── setup //路由挂载函数
|
|
||||||
│ ├── service //网络请求
|
|
||||||
│ │ ├── api //接口api
|
|
||||||
│ │ ├── middleware //请求结果的处理中间件
|
|
||||||
│ │ └── request //封装的请求函数
|
|
||||||
│ ├── settings //项目静态配置
|
|
||||||
│ │ ├── constant //常量配置
|
|
||||||
│ │ └── theme.ts //项目主题初始配置
|
|
||||||
│ ├── store //状态管理
|
|
||||||
│ │ └── modules //状态管理划分的模块
|
|
||||||
│ ├── styles //样式
|
|
||||||
│ │ ├── css //css
|
|
||||||
│ │ └── scss //scss
|
|
||||||
│ ├── typings //TS类型声明文件(*.d.ts)
|
|
||||||
│ ├── utils //全局工具函数
|
|
||||||
│ │ ├── auth //用户鉴权
|
|
||||||
│ │ ├── common //通用工具函数
|
|
||||||
│ │ ├── package //npm依赖
|
|
||||||
│ │ ├── router //路由
|
|
||||||
│ │ ├── request //请求工具函数
|
|
||||||
│ │ └── storage //存储
|
|
||||||
│ ├── views //页面
|
|
||||||
│ │ ├── about
|
|
||||||
│ │ ├── component
|
|
||||||
│ │ ├── dashboard
|
|
||||||
│ │ ├── document
|
|
||||||
│ │ ├── multi-menu
|
|
||||||
│ │ └── system //系统内置页面：登录、异常页等
|
|
||||||
│ ├── App.vue //vue文件入口
|
|
||||||
│ ├── AppProvider.vue //配置naive UI的vue文件(国际化,loadingBar、message等组件)
|
|
||||||
│ └── main.ts //项目入口ts文件
|
|
||||||
├── .cz-config.js //git cz提交配置
|
|
||||||
├── .editorconfig //统一编辑器配置
|
|
||||||
├── .env //环境文件
|
|
||||||
├── .env.development //环境文件(开发模式)
|
|
||||||
├── .env.production //环境文件(生产模式)
|
|
||||||
├── .env.staging //环境文件(自定义staging模式)
|
|
||||||
├── .eslintignore //忽略eslint检查的配置文件
|
|
||||||
├── .eslintrc.js //eslint配置文件
|
|
||||||
├── .gitignore //忽略git提交的配置文件
|
|
||||||
├── .husky //git commit提交钩子，提交前检查代码格式和提交commit内容的格式
|
|
||||||
├── .prettierrc.js //prettier代码格式插件配置
|
|
||||||
├── commitlint.config.js //commitlint提交规范插件配置
|
|
||||||
├── index.html
|
|
||||||
├── package.json //npm依赖描述文件
|
|
||||||
├── pnpm-lock.yaml //npm包管理器pnpm依赖锁定文件
|
|
||||||
├── README.md //项目介绍文档
|
|
||||||
├── tsconfig.json //TS配置
|
|
||||||
├── vite.config.ts //vite配置
|
|
||||||
└── windi.config.ts //windicss框架配置
|
|
||||||
```
|
```
|
||||||
|
|
||||||
|
- 安装依赖
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm i
|
||||||
|
```
|
||||||
|
|
||||||
|
- 运行
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm dev
|
||||||
|
```
|
||||||
|
|
||||||
|
- 打包
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm build
|
||||||
|
```
|
||||||
|
|
||||||
|
## 如何贡献
|
||||||
|
|
||||||
|
非常欢迎您的加入！[提一个 Issue](https://github.com/honghuangdc/soybean-admin/issues/new) 或者提交一个 Pull Request。
|
||||||
|
|
||||||
|
## Git 贡献提交规范
|
||||||
|
|
||||||
|
项目已经内置angular提交规范，通过git cz 代替git commit 命令即可。
|
||||||
|
|
||||||
|
git cz命令需要全局安装 commitizen
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm i -g commitizen
|
||||||
|
```
|
||||||
|
|
||||||
|
## 浏览器支持
|
||||||
|
|
||||||
|
本地开发推荐使用`Chrome 90+` 浏览器
|
||||||
|
|
||||||
|
支持现代浏览器, 不支持 IE
|
||||||
|
|
||||||
|
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt=" Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
|
||||||
|
|
||||||
|
| :-: | :-: | :-: | :-: | :-: |
|
||||||
|
|
||||||
|
| not support | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
|
||||||
|
|
||||||
|
## 开源作者
|
||||||
|
|
||||||
|
[@Soybean](https://github.com/honghuangdc)
|
||||||
|
|
||||||
|
## 捐赠
|
||||||
|
|
||||||
|
如果你觉得这个项目对您有帮助，你可以帮作者买一杯咖啡表示支持!
|
||||||
|
|
||||||
|
<p style="background:#fff;" align="center">
|
||||||
|
<img src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/wechat-pay.JPG" style="display:inline-block;width:40%;height: auto" />
|
||||||
|
<img src="https://raw.githubusercontent.com/honghuangdc/project-assets/main/img/ali-pay.JPG" style="display:inline-block;width:40%;height: auto" />
|
||||||
|
|
||||||
|
</p>
|
||||||
|
|
||||||
|
## 交流
|
||||||
|
|
||||||
|
`Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供 QQ 交流群使用问题欢迎在群内提问。
|
||||||
|
|
||||||
|
- QQ 群 `711301266`
|
||||||
|
- 本人微信号：honghuangdc，欢迎来技术交流。
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
[MIT © Soybean-2021](./LICENSE)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user