介绍

Vite-Vue-Admin 是一个前端后台管理模板，它基于 Vite2.x、Vue3.x、Vue-router4.x、Vuex4.x、Element-plus、TypeScript 实现。它使用了最新的前端技术栈，内置了 vue-i18n 国际化解决方案，动态路由，二开表格组件，antd-x6，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。也可以作为一个示例，用于学习 Vue3、Vite、Ts 等主流技术。

建议

如果你是刚学习 vue 的小伙伴，本项目可能不适合你。本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发。因为本项目集成了很多你可能用不到的功能，会造成不少的代码冗余。如果你的项目不关注这方面的问题，也可以直接基于它进行二次开发。

功能

- 登录 / 注销
  - 拼图验证

- 路由
  - 动态路由
  - 嵌套路由
  - 外链
  - iframe

- Layout
  - 搜索菜单
  - 语言切换（中简|中繁|英文）
  - 全局错误日志捕获
  - 全局 element-plus 组件大小切换
  - Screenfull 全屏
  - 动态面包屑
  - tags-view 快捷导航
  - 全局配置
    - 主题颜色
    - 菜单颜色
    - Layout部分组件控制
    - 全局水印

- 组件
  - 二开表格
  - antv-x6 可视化编辑
  - 二开上传文件
  - 图标下拉选择
  - 富文本编辑器
  - markdown 编辑器
  - canvas 签名
  - 地图获取经纬度
  - eCharts 图表
    - 折线图
    - 柱状图
    - 饼图
  
- 指令
  - 按键指令
  - 数字指令
  - 防抖节流（指令版和函数版）

- 工具类
  - 时间格式化
  - kebab-case 和 kebabCase 相互转换
  - rgb 和 hex 相互转换

- 其他
  - mock 数据
  - 首屏 loading 加载
  - 宫格样式 grid grid-${i}（i = 2 ~ 5）
  - 超出隐藏 line-${i}（i = 1 ~ 5）

- 登录 / 注销
  - 拼图验证

- 路由
  - 动态路由
  - 嵌套路由
  - 外链
  - iframe

- Layout
  - 搜索菜单
  - 语言切换（中简|中繁|英文）
  - 全局错误日志捕获
  - 全局 element-plus 组件大小切换
  - Screenfull 全屏
  - 动态面包屑
  - tags-view 快捷导航
  - 全局配置
    - 主题颜色
    - 菜单颜色
    - Layout部分组件控制
    - 全局水印

- 组件
  - 二开表格
  - antv-x6 可视化编辑
  - 二开上传文件
  - 图标下拉选择
  - 富文本编辑器
  - markdown 编辑器
  - canvas 签名
  - 地图获取经纬度
  - eCharts 图表
    - 折线图
    - 柱状图
    - 饼图
  
- 指令
  - 按键指令
  - 数字指令
  - 防抖节流（指令版和函数版）

- 工具类
  - 时间格式化
  - kebab-case 和 kebabCase 相互转换
  - rgb 和 hex 相互转换

- 其他
  - mock 数据
  - 首屏 loading 加载
  - 宫格样式 grid grid-${i}（i = 2 ~ 5）
  - 超出隐藏 line-${i}（i = 1 ~ 5）

目录结构

├─.github                    # git配置
├─dist                       # 打包后文件
├─mock
│  ├─api                     # mock 接口
│  └─data                    # mock 数据源
├─public                     # 静态资源
└─src                        # 源代码
│   ├─api                    # 接口请求
│   ├─assets                 # 图片等静态资源
│   ├─components             # 公共组件
│   ├─config                 # 全局配置
│   ├─directives             # 全局指令
│   ├─hooks                  # hooks
│   ├─language               # 国际化语言文件
│   ├─layout                 # 全局 layout （可以理解为 “壳”）
│   ├─router                 # 路由
│   ├─store                  # 全局 store管理
│   ├─styles                 # 全局样式
│   ├─utils                  # 全局公用方法
│   ├─views                  # views 所有页面
│   ├─App.vue                # 入口页面
│   ├─main.ts                # 入口文件 加载组件 初始化等
│   ├─permission.ts          # 路由守卫
│   ├─md-editor.ts           # markdown 引入包文件
│   └─index.d.ts             # 依赖声明文件
├─index.html                 # 项目首页
├─.env.xxx                   # 环境变量配置
├─.eslintrc.js               # eslint 配置项
├─babel.config.js            # babel 配置
├─.gitignore                 # git 提交忽略文件配置
├─vite.config.ts             # vite 打包配置
├─index.d.ts                 # 声明文件
├─README.md                  # 自述文件
├─tsconfig                   # typescript 配置
└─package.json               # package.json

├─.github                    # git配置
├─dist                       # 打包后文件
├─mock
│  ├─api                     # mock 接口
│  └─data                    # mock 数据源
├─public                     # 静态资源
└─src                        # 源代码
│   ├─api                    # 接口请求
│   ├─assets                 # 图片等静态资源
│   ├─components             # 公共组件
│   ├─config                 # 全局配置
│   ├─directives             # 全局指令
│   ├─hooks                  # hooks
│   ├─language               # 国际化语言文件
│   ├─layout                 # 全局 layout （可以理解为 “壳”）
│   ├─router                 # 路由
│   ├─store                  # 全局 store管理
│   ├─styles                 # 全局样式
│   ├─utils                  # 全局公用方法
│   ├─views                  # views 所有页面
│   ├─App.vue                # 入口页面
│   ├─main.ts                # 入口文件 加载组件 初始化等
│   ├─permission.ts          # 路由守卫
│   ├─md-editor.ts           # markdown 引入包文件
│   └─index.d.ts             # 依赖声明文件
├─index.html                 # 项目首页
├─.env.xxx                   # 环境变量配置
├─.eslintrc.js               # eslint 配置项
├─babel.config.js            # babel 配置
├─.gitignore                 # git 提交忽略文件配置
├─vite.config.ts             # vite 打包配置
├─index.d.ts                 # 声明文件
├─README.md                  # 自述文件
├─tsconfig                   # typescript 配置
└─package.json               # package.json

前序准备

本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:

如何加入我们

本文档项目地址 Vite-Vue-Admin-Docs 基于 Vitepress 开发。

有任何修改和建议都可以该项目 pr 和 issue

Vite-Vue-Admin 还在持续迭代中，逐步沉淀和总结出更多功能和相应的实现代码，总结中后台产品模板/组件/业务场景的最佳实践。同时整个项目本着一切免费的原则，原则上不会收取任何费用及版权，可以放心使用。本项目也十分期待你的参与和反馈。

介绍 ​

功能 ​

目录结构 ​

前序准备 ​

如何加入我们 ​

介绍

功能

目录结构

前序准备

如何加入我们