【源码】基于vite4、vue3和typescript5的通用后台系统框架

项目简介

本项目是一个通用的后台系统框架，基于vite4、vue3、typescript5和element-plus搭建。目的是加深对动态路由、动态权限的理解，同时为后续新项目提供可直接使用的模板，避免重复搭建。

项目的主要特性和功能

1. 目录结构清晰，src目录下的router、service、store、views等文件夹一一对应，便于管理和维护。
2. 可自动化生成路由，利用vite的import.meta.glob方法自动读取路由对象，无需手写路由。
3. 支持多类型路由，包含constantRoutes（无需动态判断权限的路由）、dynamicRoutes（需动态判断权限并添加的路由）和hiddenRoute（不在侧边栏展示的路由）。
4. 具备权限验证机制，通过本地所有路由与后端返回的权限菜单比对，生成当前用户的权限路由表。
5. 可进行跨域代理配置，在.env.development和.env.production文件中配置proxy代理解决跨域问题。
6. 代码提交规范，采用Commitizen规范提交代码。
7. 对web storage和axios进行二次封装，提供更易用的API和请求实例私有拦截器。

安装使用步骤

1. 确保已下载本项目的源码文件。
2. 安装依赖：在项目根目录下，打开终端并执行npm install命令。
3. 配置跨域（可选）：若后端未配置跨域，在.env.development（开发环境）和.env.production（生产环境）文件中更改BITE_BASE_URL，并确保每个请求前加上/api。
4. 自动创建路由和组件（可选）：在src/mock/route.ts文件中添加配置项，然后在命令行执行ymcli addroutecpns./src/mock/route.ts ts命令。
5. 启动项目：执行npm run dev命令启动开发服务器。
6. 代码提交：使用npm run commit代替git commit -m 'xx'进行代码提交。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】