wanxiabayue / vue-element-plus-admin

一套基于vue3、element-plus、typesScript、vue-cli4的后台集成方案

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

介绍

vue-element-admin 3.0是一个基于vue3typeScriptvue-cli4element-plus的后台解决方案,借鉴了vue-element-adminvue-vben-admin的写法和优点。内置了动态路由,权限验证,典型的业务模型,丰富的功能组件,并且提供了多页配置,开箱即用,可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型,也可以作为一个示例,用于学习。

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

在线预览地址

基础模版 - template分支

单页模版 - single-page分支

功能

- 登录 / 注销

- 权限验证
  - 页面权限
  - 指令权限
  - 权限配置

- 多环境

- 多页配置

- 引导页

- 全局功能
  - 三种不同风格 layout 布局
  - 动态侧边栏(支持多级路由嵌套)
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
  - 本地 mock 数据
  - Screenfull全屏
  - 自适应收缩侧边栏

- 功能组件
  - 图表
  - 图片预览
  - 按钮
  - 消息提示
  - 查询
  - 富文本编辑器
  - markdown编辑器
  - 弹窗
  - 显示更多
  - 详情组件
  - 二维码组件
  - 头像组
  - 文字高亮

- 表格
  - 基础表格
  - 分页表格
  - 带斑马纹表格
  - 带边框表格
  - 带状态表格
  - 固定表头
  - 固定列
  - 固定列和表头
  - 流体高度
  - 多级表头
  - 单选
  - 多选
  - 排序
  - 筛选
  - 展开行
  - 树形数据与懒加载
  - 自定义表头
  - 表尾合计行
  - 合并行或列
  - 自定义索引

- 自定义指令
  - Clipboard

- Hooks
  - UseWaterMark
  - UseScrollTo

- 多级菜单缓存

- 综合实例
  - 列表综合实例-弹窗
  - 列表综合实例-页面

前序准备

你需要在本地安装nodegit。本项目技术栈基于ES2015+vuevuexvue-routervue-cliaxioselement-plus,所有的请求数据都使用Mock.js进行模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。

注意:本项目不支持低版本浏览器(如 ie),后续会考虑支持IE11。

目录结构

.
├── mock # 模拟数据
├── public # 静态资源
├── src # 项目代码
│   ├── assets # 静态资源
│   ├── cache # web-storage-cache配置
│   ├── components # 组件
│   ├── directive # 指令
│   ├── hooks # hooks
│   ├── libs  # 按需引入element-plus
│   ├── pages # 多页
│   │   └── index # index多页
│   │   │   ├── api # 全局api
│   │   │   ├── axios-config # axios配置
│   │   │   ├── layout # layout布局
│   │   │   ├── router # 路由配置
│   │   │   ├── store # 状态管理
│   │   │   ├── views # index多页 views 所有页面
│   │   │   ├── App.vue # 入口页面
│   │   │   ├── main.js # 入口文件 加载组件 初始化等
│   │   │   └── permission.js # 权限管理
│   ├── styles # 样式
│   ├── types # 全局types
│   ├── utils # 工具类
│   └── vue-bus # vueBus
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── babel.config # babel配置文件
├── pages.config # 多页配置文件
├── postcss.config.js # postcss配置文件
├── package.json # package.json
├── vue.config # vue-cli 配置
└── yarn.lock

浏览器支持

现代浏览器。

Firefox
Firefox
Chrome
Chrome
Safari
Safari
last 2 versions last 2 versions last 2 versions

About

一套基于vue3、element-plus、typesScript、vue-cli4的后台集成方案

License:MIT License


Languages

Language:Vue 50.7%Language:TypeScript 43.2%Language:Less 2.6%Language:JavaScript 2.5%Language:HTML 0.7%Language:CSS 0.2%