# Leafage UI
[](./LICENSE) [](https://github.com/little3201/leafage-ui/stargazers) [](https://github.com/little3201/leafage-ui/network/members)
管理模板,使用 Vue 3/React、Vite、Pinia 和 Tailwind CSS构建。设计用于构建高效、响应式和快速加载的管理界面。
后台接口服务仓库: 后端服务仓库
基于 Element plus 库(branch: element)。
基于 Quasar framework 库(branch: main, develop)。
基于 Material UI 库(branch: react)。
### 特性
- **Vue 3/React、Vite、Pinia 和 Tailwind CSS -** 快速高效的开发
- **深色主题 -** 现代且引人注目
- **可访问性 -** 包容且用户友好
- **i18n集成 -** 便于全球本地化
- **响应式设计 -** 自适应各种大小的设备
- **高度可定制 -** 可根据项目风格定制
## 技术栈
开发框架:Vue3/React、TypeScript、Vite、Element-Plus/Quasar、Tailwind CSS
测试框架:Vitest
代码规范:Eslint、Husky、Lint-staged、commitlint
## 页面预览
**light模式**

**dark模式**

### 目录结构
```
├── public/ # Public static assets
│ ├── icons/ # Public icons
│ ├── svgs/ # Public svgs
├── src/
│ ├── api/ # http request api
│ ├── assets/ # assets
│ ├── boot/ # plugins init
│ ├── components/ # Vue components
│ ├── constants/ # Constants
│ ├── css/ # css
│ ├── lang/ # i18n languages
│ ├── layouts/ # Layout components
│ ├── mocks/ # Mocks with msw
│ ├── pages/ # Pages
│ ├── router/ # vue router
│ ├── stores/ # Pinia
│ ├── utils/ # Utils
│ └── App.vue # Root component
├── test/ # Test
├── index.html # Entry HTML file
├── .env.development # Env for dev
├── .env.production # Env for prod
└── postcss.config.js # Postcss configuration
└── eslint.config.js # Eslint configuration
└── commitlint.config.js # Commitlint configuration
└── lint-staged.config.js # Lint staged configuration
└── quasar.config.ts # Vite configuration
└── vitest.config.ts # Vitest configuration
```