4.0 KiB
4.0 KiB
vue-element-plus-admin
一套基于 vue3 & typeScript4 & vite2 的后台集成方案
介绍
vue-element-plus-admin 是一套基于 vue3 & typeScript4 & vite2 的后台集成方案,内置了动态路由,权限验证,典型的业务模型,丰富的功能组件,开箱即用,可以用来作为项目的启动模版。它可以帮助你快速搭建企业级中后台产品原型,也可以作为一个示例,用于学习。
vue-element-plus-admin 的定位是后台集成方案,不太适合当基础模板来进行二次开发。因为集成了很多你可能用不到的功能,会造成不少的代码冗余。如果你的项目不关注这方面的问题,也可以直接基于它进行二次开发。
如需要基础模版,请切换到tempalte
分支。
前序准备
你需要在本地安装node和git。本项目技术栈基于ES2015+、typescript、vue、pinia、vue-router、axios和element-plus,所有的请求数据都使用Mock.js进行模拟,提前了解和学习这些知识会对使用本项目有很大的帮助。
目录结构
.
├── public # 静态资源
├── src # 项目代码
│ ├── assets # 静态资源
│ ├── axios-config # axios配置
│ ├── components # 公用组件
│ ├── directive # 自定义指令
│ ├── hooks # 常用hooks
│ ├── layout # 布局组件
│ ├── plugins # 外部插件
│ ├── mock # 模拟数据
│ ├── router # 路由配置
│ ├── store # 状态管理
│ ├── styles # 全局样式
│ ├── utils # 全局工具类
│ ├── views # 路由页面
│ ├── vue-bus # 跨组件通信
│ ├── App.vue # 入口vue文件
│ ├── env.d.ts # vue全局声明
│ ├── global.d.ts # 业务代码全局声明
│ ├── main.ts # 主入口文件
│ └── permission.ts # 路由拦截
├── .babelrc # babel配置
├── .editorconfig # 编辑器配置
├── .eslintignore # eslint 忽略配置项
├── .eslintrc # eslint 配置文件
├── .gitignore # git 忽略提交配置文件
├── .postcssrc.js # postcss 配置文件
├── .prettierrc.js # 代码格式 配置文件
├── .stylelintignore # stylelint 忽略文件
├── CHANGLOG.md # 更新日志
├── commitlint.config.js # git commit 配置文件
├── package.json
├── README.md
├── stylelint.config # stylelint配置文件
├── tsconfig.json # ts 配置文件
├── vite.config.ts # vite配置
└── yarn.lock
浏览器支持
由于 Vue 3 不再支持 IE11,vue-element-plus-admin 也不支持 IE
![]() Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
---|---|---|---|
Edge ≥ 79 | Firefox ≥ 78 | Chrome ≥ 64 | Safari ≥ 12 |