# xt-admin-vue3

**Repository Path**: nideweixiaonuannuande/xt-admin-vue3

## Basic Information

- **Project Name**: xt-admin-vue3
- **Description**: 🔥 🎉一款基于Vue3+Typescript Vite pinia+ element plus+unocss且超级好用的中后台管理框架
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 81
- **Forks**: 18
- **Created**: 2022-05-14
- **Last Updated**: 2025-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, TypeScript, Element-UI, element-plus

## README

## Vue3 + Typescript + Vite + pinia + element plus + unocss

### 分支说明：
1. master分支为演示分支,会持续更新
2. course分支为教学分支
3. old为旧版本，旧版本不再维护

### 其他说明：
1. 本项目源码，免费开源，持续更新
2. 本项目配套了讲解视频，如果你想学习一个企业级管理框架如何搭建，可找我购买配套的视频，有购买意愿的可以给我发私信或扫码添加（前100名购买者只需88,100名后108）

<p>
  <img src="https://gitee.com/nideweixiaonuannuande/img-cache/raw/master/IMG_202309143802_791x772.jpg" width="150"  />
</p>

### 如果大家觉得有用，请帮忙点下star，十分感谢

### vue3版本代码地址
1. 码云：https://gitee.com/nideweixiaonuannuande/xt-admin-vue3
2. github：https://github.com/1245488569/xt-admin-vue3

### Vue3版本演示地址
1. http://nideweixiaonuannuande.gitee.io/xt-admin-vue3/#/login
（目前账号密码可以随便输入）

### React18版本代码地址
1. 码云：https://gitee.com/nideweixiaonuannuande/xt-admin-react18
2. github：https://github.com/1245488569/xt-admin-react18

### React18版本演示地址
1. http://nideweixiaonuannuande.gitee.io/xt-admin-react18/#/login
（目前账号密码可以随便输入）

### Vue3版本试看连接
1. https://pan.baidu.com/s/1MmU-ATFGI54vum_0p0dbOQ?pwd=kjht

## 特点
1. Vue3.4
2. Vite5
3. Typescript5
4. pinia
5. element plus
6. Unocss
7. pnpm 包管理器
8. 权限菜单支持（前端与后端模式都支持，极大程度简化开发工作）
9. 4种布局模式随意切换
10. 布局高度 宽度随意切换
11. Api 自动引入
12. Mock 支持
13. 暗黑模式 支持
14. i18n 国际化支持
15. 图标自动引入（iconify万种图标自动且按需引入）
16. 组件自动引入（components目录下组件自动且按需引入）
17. 菜单搜索
18. 全屏
19. 页面刷新
20. 动态换肤
21. VueUse 支持
22. gzip brotli资源压缩支持
23. 环境变量配置支持
24. 统一的代码规范与风格支持
25. 漂亮的 login 404 页 支持
26. 配置选择支持
27. svg-icon支持
28. 多级缓存
29. 历史菜单
30. 面包屑导航
31. 其余的（请查看app.ts 或者 .env文件 或者assets/styles/globals/layout.scss）

## `node` 版本推荐
最低18，推荐20

## 使用（请一定使用pnpm）

1. git初始化
```shell
git init
```

2. 安装依赖
```shell
pnpm install
```

3. 开发
```shell
pnpm dev
```

4. 打包

```shell
pnpm build
# 测试环境
pnpm build:test
```

5. 代码规范校验

```shell
pnpm lint
# 校验时修复
pnpm lint:eslint
pnpm lint:stylelint
```