一个vue3-admin-template-vite项目,升级于pan大佬的vue-admin-template项目,基本保留原有架构无缝切换

Overview

vue3-element-vite-template

一款 vue3 开箱即用的纯净的后台管理系统,只包含 ui/权限/axios 封装/svg 等

在线预览地址

此项目是在 pan 大佬的vue-admin-template项目基础上进行微改的 vue3 版本,基本沿用 vue-admin-template 项目构造,添加了一些更贴合项目的改动。如果有使用过 vue-admin-template 或者 vue-element-admin 的同学,轻松上手无缝切换。没使用过的话可以当作 vue3 的入门练习。

技术栈:vue3.x + vite2.x + element-plus + vue-router4.x + vuex4.x

Build Setup

git clone https://github.com/Maxfengyan/vue3-admin-template-vite.git
cd vue3-admin-template-vite
npm install
npm run dev

相对于 vue-admin-template 改动

  1. Vite:使用 vite 构建工具,放弃 webpack。(vite 真香)

  2. Axios 封装请求

    (1) 根据实际项目开发需求,系统中可能会请求多个不同的 baseurl,为方便处理封装 axios 类(自定义修改响应拦截在src/core/request.js)。

    (2) 为了项目打包后也可以灵活调整后端接口地址,在打包后自动切换为闭包形式读取 baseurl(public/api.js),方便项目打包后部署时随便修改接口地址。

  3. 权限过滤拦截:权限处理更加颗粒化/灵活化。

    (1) 在.env 配置文件中设置 VITE_POWER_TYPE 是否启用动态权限路由功能

    (2) 改变动态路由逻辑,原本通过角色来确定路由权限,现改为每个路由中添加各自的唯一的路由标识,通过接口获取用户的权限标识,进行颗粒化的比对分配权限,更加灵活一些。

    (3) 权限数据并非统一结构,可以结合项目进行调整(修改逻辑在src/core/addRoutePermission)

  4. Sidebar:剔除了侧边栏适配 mobile 的响应式(懒...),调整代码逻辑,在.env 文件中设置 系统标题(VITE_SYSTEM_SWITCH/VITE_SYSTEM_NAME)/系统 logo(VITE_SYSTEM_LOGO)

  5. svg:下载 svg 文件存放于*src/plugin/icons/svg/*下,使用方式:

<!-- logo.svg -->
<svg-icon name="logo" color="xxx" class="xxxx" />

     6.mockJs:因为本地开发时使用 mockJs 无法在浏览器捕捉到响应信息,故放弃,可采用以下两种方法:
         (1) easy-mock(推荐):服务 器搭建 easy-mock 服务进行接口管理,前后端开发方便协作规范。

         (2) public:vite 项目 public 文件夹下文件会自动变为静态资源服务,可以在 public 文件夹下根据接口规范创建相应路径的 json 文件达到 ajax 请求目的。

注:如果需要前后端联调接口需要在 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配置文件

未完待续

路过的同学不要走 😀 ,如果本项目对你有帮助,请给我一键三连 一个 star~

🔥基于Furion/.NET 5实现的通用管理平台。整合最新技术,模块插件式开发,前后端分离,开箱即用。集成EF Core、多租户、缓存、数据校验、鉴权、事件总线、动态API、通讯、远程请求、任务调度、gRPC等众多黑科技。代码简洁、易扩展,让开发更简单、更通用、更流行!

Admin.NET 前后端分离架构,开箱即用,紧随前沿技术 ?? 概述 基于.NET 5实现的通用权限管理平台(RBAC模式)。整合最新技术高效快速开发,前后端分离模式,开箱即用。 后台基于Furion框架,前端基于小诺Antd Vue框架。集EFCore、多租户、分库读写分离、缓存、数据校验、鉴权

zuohuaijun 5 Jul 18, 2021
An elegant dashboard

D2Admin is a fully open source and free enterprise back-end product front-end integration solution, using the latest front-end technology stack, javas

D2 Projects 10.7k Jul 26, 2021
🎉 A magical vue admin

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui. vue-element-admin is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you.

花裤衩 69.5k Jul 25, 2021
A vue3 version of vue-element-admin

vue-element-admin is a production-ready front-end solution for admin interfaces. It is based on vue and uses the UI Toolkit element-ui.

Ziwen Mei 348 Jul 24, 2021
🚀🚀🚀vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

??????vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,ant-design,vue-admin-beautiful-pro,vab admin pro,vab admin plus主线版本基于element-plus、element-ui、ant-design-vue三者并行开发维护,同时支持电脑,手机,平板,切换分支查看不同的vue版本,element-plus版本已发布(vue3,vue3.0,vue,vue3.x,vue.js)

good luck 9.6k Jul 24, 2021
Restful Admin Dashboard Based on Vue and Boostrap 4

REST-ADMIN 中文文档 An Powerful Admin Dashboard based on Boostrap-Vue. Demo: http://rest-admin.genyii.com/ admin admin Please support me on https://afdian

Johnny Wu 590 Jul 24, 2021
🐜 Ant Design Pro's implementation with Vue

?? Ant Design Pro's implementation with Vue

null 2.5k Jul 29, 2021
🖖 A vue-cli 3.0 + typescript minimal admin template

vue-typescript-admin-template is a production-ready front-end solution for admin interfaces based on vue, typescript and UI Toolkit element-ui

Chong Guo 3.9k Jul 25, 2021
Crudapi Admin Web (crudapi-admin-web)

简介:crudapi后台管理页面,框架采用Vue,控件库为Quasar, 形式为SPA单页面应用。 主要知识点:Vue基本知识,自定义组件,axios网络请求,Vuex状态管理,Router路由,本地存储LocalStorage、Session、Cookie,登录,本地调试,docker打包等。 主要功能:元数据管理,序列号管理,表关系设置,业务数据crud增删改查等。

crudapi 20 Jul 8, 2021
Open Admin是基于 Spring Boot + Spring Security + Mybatis + Vue Antd Admin Pro + Mysql开发的框架,致力于为用户生成定制的前后端脚手架框架。

项目介绍 Open Admin是基于 Spring Boot + Spring Security + Mybatis + Vue Antd Admin Pro + Mysql开发的框架,致力于为用户生成定制的前后端脚手架框架,系统集成了同步菜单、异步菜单、RBAC、 菜单权限、日志管理、Excel导

cxp1539 179 Jul 18, 2021
Admin One - Vue.js 3 Tailwind CSS admin dashboard template

Admin One - Vue.js 3 Tailwind CSS admin dashboard template

JustBoil.me 50 Jul 23, 2021
vue-admin-work是一个中后台系统管理方案。使用 vue2.x 及周边全家桶工具开发而来。支持多种功能,不同角色权限🚀🚀🚀🎉🎉

vue-admin-work是一个中后台系统管理方案。使用 vue2.x 及周边全家桶工具开发而来。支持多种功能,不同角色权限??????????

null 5 Jun 6, 2021
Star Admin Vue Admin Template is a free admin template based on Bootstrap 4 and Vue.js.

Star Admin Vue Admin is a free admin template based on Bootstrap 4 and Vue.js.

BootstrapDash 284 Jul 21, 2021
✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

✨ ✨ ✨ A vue3 style Admin based on Vite2, vue3.0, ant-design-vue 2.x, typescript,vuex,vue-router,Efforts to update in progress...

Vben 5.4k Jul 24, 2021