一款 vue3 开箱即用的纯净的后台管理系统,只包含 ui/权限/axios 封装/svg 等
此项目是在 pan 大佬的vue-admin-template项目基础上进行功能微改的 vue3 版本,基本沿用 vue-admin-template 项目构造,添加了一些更贴合实际项目的改动和功能。如果有使用过 vue-admin-template 或者 vue-element-admin 的同学,轻松上手无缝切换。没使用过的话可以当作 vue3 的入门练习。
git clone https://gitee.com/Maxfengyan/vue3-admin-template-vite.git
cd vue3-admin-template-vite
npm install
npm run dev
Vite:使用 vite 构建工具,放弃 webpack。(vite 真香)
Axios 封装请求:
(1) 根据实际项目开发需求,系统中可能会请求多个不同的 baseurl,为方便处理封装 axios 类(自定义修改响应拦截在src/core/request.js)。
(2) 为了项目打包后也可以灵活调整后端接口地址,在打包后自动切换为闭包形式读取 baseurl(public/api.js),方便项目打包后部署时随便修改接口地址。
权限过滤拦截:权限处理更加颗粒化/灵活化。
(1) 在.env 配置文件中设置 VITE_POWER_TYPE 是否启用动态权限路由功能
(2) 改变动态路由逻辑,原本通过角色来确定路由权限,现改为每个路由中添加各自的唯一的路由标识,通过接口获取用户的权限标识,进行颗粒化的比对分配权限,更加灵活一些。
(3) 权限数据并非统一结构,可以结合项目进行调整(修改逻辑在src/core/addRoutePermission)
Sidebar:剔除了侧边栏适配 mobile 的响应式(懒...),调整代码逻辑,在.env 文件中设置。
VITE_SYSTEM_SWITCH: 是否展示系统标题和logo
VITE_SYSTEM_NAME: 系统标题
VITE_SYSTEM_LOGO: 系统 logo
<!-- logo.svg -->
<svg-icon name="logo" color="xxx" class="xxxx" />
mockJs:因为本地开发时使用 mockJs 无法在浏览器捕捉到响应信息,故放弃,可采用以下两种方法:
(1) easy-mock(推荐):服务器搭建 easy-mock 服务进行接口管理,前后端开发方便协作规范。
(2) public:vite 项目 public 文件夹下文件会自动变为静态资源服务,可以在 public 文件夹下根据接口规范创建相应路径的 json 文件达到 ajax 请求目的。
tips:如果需要前后端联调接口需要在 vite.config.js 配置 proxy
|- public // 公共静态资源以及模拟接口json文件
|- src // 开发文件夹
| |- api // 项目请求接口
| |- assets // 静态图片
| |- components // 公共组件
| | |- ColorPicker // 颜色组件(修改全局皮肤,未完成)
| | |- Layout // 项目布局核心组件
| |- core // 封装核心功能
| | |- addRoutePermission // 权限校验
| | |- auth // 存放缓存
| | |- get-page-title // 网页标题
| | |- request // Axios封装
| |- directive // 自定义指令
| |- mixin // vue mixin
| | |- global // 读取全局参数(颜色组件相关,未用)
| |- plugin // 全局插件
| | |- icons // 封装svg plugin
| |- router // vue路由
| |- store // vuex
| | |- modules // vuex modules
| | |- getters // vuex getters
| | |- index // vuex入口
| |- stylus // css-stylus
| | |- chrome // chrome 覆盖原生css
| | |- elementUI // element 覆盖原生css
| | |- index // 入口styl
| | |- sidebar // 侧边栏
| | |- transition // 过渡动画
| | |- variables // stylus变量
| |- views // 页面
| | |- 404 // 404
| | |- dashboard // 根页面
| | |- login // 登录
| |- App // vue入口组件
| |- elementui // 按需加载elementui组件
| |- main // vue入口文件
|- .env // 全局配置参数
|- vite.config.js // vite配置文件
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。