# vue-tdesign-admin
一个js版本的vite + vue3 + tdesign-next的后台系统模板

#### 构建工具
[vite](https://vitejs.cn/vite3-cn/)

#### 介绍
使用vue3 + tdesign-vue-next + mock搭建的一个PC端后台系统的基础模板，可以在此基础上直接开发业务代码，避免重复的环境搭建和一些通用功能开发。主要功能有表单、表格、角色权限管理、登录、主题切换等。页面数据使用本地json文件保存，可以进行增删改查操作.



#### 安装教程

1.  克隆项目
```
git clone https://gitee.com/xg_xiaoguai/vue-tdesign-admin.git
```
2.  进入项目
```
cd vue-tdesign-admin
```
3.  安装依赖
```
npm install
```
4.  运行
```
npm run dev
```
5.  打包
```
npm run build
```
6.  本地预览
```
// 需要先运行打包命令！本地启动一个服务器，访问打包后的dist目录，方便测试打包后是否存在问题
npm run preview
```

7、eslint校验
```
// 校验
npm run lint

// 修复
npm run lint -- --fix
```

#### 界面展示
登录
![登录](https://gitee.com/xg_xiaoguai/xg-imange/raw/master/vue-tdesign-admin/2.png)
列表
![列表](https://gitee.com/xg_xiaoguai/xg-imange/raw/master/vue-tdesign-admin/1.png)
文件上传
![文件上传](https://gitee.com/xg_xiaoguai/xg-imange/raw/master/vue-tdesign-admin/5.png)
主题切换
![主题切换](https://gitee.com/xg_xiaoguai/xg-imange/raw/master/vue-tdesign-admin/7.png)
暗黑模式
![暗黑模式](https://gitee.com/xg_xiaoguai/xg-imange/raw/master/vue-tdesign-admin/4.png)
管理员列表
![管理员列表](https://gitee.com/xg_xiaoguai/xg-imange/raw/master/vue-tdesign-admin/6.png)