# vue3-element-admin

**Repository Path**: zshun66/vue3-element-admin

## Basic Information

- **Project Name**: vue3-element-admin
- **Description**: vue3+vite+element plus ui 后台管理系统模板(简易版)
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-12-23
- **Last Updated**: 2025-04-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 后台管理系统

## README

#### 项目简介

本项目为 Vue 3 + Vite + Elememt Plus 的CMS内容管理系统模板

#### 技术栈

vue3.x: v3.2.25

vue-router: ^4.0.12

vuex: ^4.0.2

axios: ^0.24.0

element-plus: ^1.2.0-beta.6

@element-plus/icons-vue: ^0.2.7

#### 官方推荐IDE工具

- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)


#### 本地路由对象设计
{
    id: 路由id
    path: 路由路径
    name: 路由名称
    redirect: 重定向路径
    component: 路由对应渲染的组件
    children: 子路由数组
    meta: { 路由元信息
        keepAlive: 该路由是否开启缓存
        closable: 该路由标签是否可关闭
        iconName: 菜单图标名称
		permission: {
			all: [] 该路由全部的权限
			have: [] 该路由拥有的权限
		} 
    }
}

#### 后端返回权限路由对象数据参照
{
    id: 路由id
    children: 子路由数组
    meta: { 路由元信息
        title: '该路由的标题'
		permission: {
			all: [] 该路由全部的权限
			have: [] 该路由拥有的权限
		} 
    }
}

#### 模板注意点
1、菜单排序由后端返回的数据决定
2、只支持到三级菜单
3、本地路由对象的path属性写的层级关系明确点，例如:
	path: '/main/system/user'
4、*本地路由对象的name属性必须与path属性的最后一级同名，面包屑导航需要这样的数据格式，例如:
	path: '/main/system/user'
	name: 'user'
5、*本地路由对象的name属性必须不可重复