# simple_admin_template

**Repository Path**: menon-qiqi/simple_admin_template

## Basic Information

- **Project Name**: simple_admin_template
- **Description**: vue3-admin后台模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 14
- **Forks**: 0
- **Created**: 2023-06-04
- **Last Updated**: 2023-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">V3-Template</h1>

<p align="center">
    <a href="https://menon-qiqi.gitee.io/simple_admin_template/">在线预览</a>
  </p>

## 简介

`V3-Template` 是一款开源开箱即用的中后台管理系统。基于 `Vue3`、`Vite4`、`Element-Plus`、`TypeScript`、`Pinia` 等主流技术开发，内置许多开箱即用的组件，能快速构建中后台管理系统，目前决定完全开源，如果觉得该项目对你有所帮助，可以点一个 star,开源不易！

## 测试账号

```

1.  用户名：admin  密码 123456  拥有admin的权限可以查看所有页面
2.  用户名：test   密码 123456  拥有test的页面权限，可以查看部分页面

```

## 预览

- [点我预览](https://menon-qiqi.gitee.io/simple_admin_template/)
<p align="center">
  <img width="100%" src="https://i.mji.rip/2023/07/18/a1db2085f1464c3de766f547bc922986.png">
  <img width="100%" src="https://i.mji.rip/2023/07/18/7a669bbf78260c2cf520203d69f3daae.png">
  <img width="100%" src="https://i.mji.rip/2023/07/18/31f189005bb10a010d36d6d46d4e808f.png">
</p>

- 暗黑模式
<p align="center">
  <img  width="100%" src="https://i.mji.rip/2023/07/18/c1f3b2819e4fe9e1b0e45bb9f5d70e4b.png">
  <img  width="100%" src="https://i.mji.rip/2023/07/18/f2ed02296a4588a36a41aa346a8af24e.png">
</p>

## 架构清单

- Vue3
- Vue-router
- Pinia
- Plop
- Typescript
- Vite
- Taiwindcss
- Axios
- 模拟接口：mockjs
- 代码检测和格式化：eslint+prettier
- git 提交格式化：husky+lint-staged
- 代码日志规范：@commitlint/cli+@commitlint/config-conventional
- ...其他

## 功能

- Axios 集成

```
- loading
- 错误日志收集
- 错误重试机制
- 取消重复请求
```

- 白天和暗黑模式切换
- 动态权限路由
- 内置用户管理+角色管理+部门管理+字典管理等
- 内置错误日志，登录日志，操作日志收集
- table 页面模板内置，快速开发 table，开箱即用
- 常用组件 input,table,form,loading,filter 等组件封装集成
- 错误页面 403 404 500 等
- 等等其他功能(正在开发中。。。)

### 文件目录说明

```
├── build                            ---vite打包配置
├── mock                             ---mock模拟数据
├── plop-templates                   ---plop工程化模版
├── public                           ---静态资源文件
├── src
│  ├── api                           ---接口
│  ├── assets                        ---图片
|  |   |—— icons                     ---图标
│  ├── components                    ---可复用的vue组件
│  ├── constant                      ---常量
│  ├── directive
│  ├── enums
│  ├── hooks
│  ├── layouts                       ---布局方式
│  ├── plugins                       ---插件
│  ├── router                        ---路由
│  ├── store                         ---pinia
│  ├── styles                        ---sass样式
│  ├── utils                         ---方法函数
│  ├── views                         ---页面
│  ├── App.vue
│  ├── main.ts
├── types
├── vite                             ---vite插件
├── .env
├── .env.development
├── .env.production
├── .eslintrc.cjs
├── .prettierrc.cjs
├── commitlint.config.cjs           ---代码提交日志规范
├──  plopfile.cjs
├──  package.json
├──  pnpm-lock.yaml
├──  README.md
└──  vite.config.ts                 ---vite的配置


```

## 文档

目前尚未搭建文档，如后期有需要可构建

## 安装

- 注意本项目设置了 npx only-allow pnpm 如需使用其他包管理工具请自行移除(推荐使用 pnpm)

```
# 克隆项目
git clone https://gitee.com/menon-qiqi/simple_admin_template.git
# 进入项目目录
cd simple_admin_template
# 安装依赖
pnpm install
# 本地开发 启动项目
pnpm dev
```

### 部署

```
# 打包项目
pnpm run build

# 打包大小分析
pnpm run report

# 预览
pnpm run preview
```

## 浏览器支持

本地开发推荐使用 `Chrome 80+` 浏览器

支持现代浏览器, 不支持 `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                                                                                                |

## 最后

开源不易，若觉得这个项目对你有用，可以点个[star](https://gitee.com/menon-qiqi/simple_admin_template.git)，欢迎提出建议。