/vue3-admin-template

About 🎉 A magical vue3 admin https://zhihuifanqiechaodan.github.io/vue3-admin-template

Primary LanguageVue

介绍

vue3-admin-template  是一个后台前端解决方案,它基于  vue  和  element-plus实现。它使用了最新的前端技术栈,内置了动态路由,权限验证,提供了多种布局方式,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。

建议

本项目的定位是管理后台开发模版,适合当基础模板来进行二次开发,部分公共组件会在后续持续集成,欢迎提 issues。

功能

- 登录 / 注销

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

- 多环境发布
  - dev sit stage prod

- 全局功能
  - 国际化多语言
  - 多种动态换肤
  - 动态侧边栏(支持多级路由嵌套)
  - 动态面包屑
  - 快捷导航(标签页)
  - Svg Sprite 图标
  - Screenfull全屏

前序准备

你需要在本地安装  node  和  git。本项目技术栈基于  ES2015+element-plusaxiospiniavue-routervite和提前了解和学习这些知识会对使用本项目有很大的帮助。

目录结构

本项目已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。

├── README.md
├── deploy.sh
├── index.html
├── jsconfig.json
├── package.json
├── public
   └── favicon.ico
├── src
   ├── App.vue
   ├── api
   ├── assets
   ├── components
   ├── icons
   ├── layout
   ├── main.js
   ├── permission.js
   ├── router
   ├── settings.js
   ├── store
   ├── styles
   ├── utils
   └── views
├── vite.config.js
├── yarn.loc
└──.env.prod

安装

# 克隆项目
git clone https://github.com/zhihuifanqiechaodan/vue3-admin-template.git

# 进入项目目录
cd vue3-admin-template

# 安装依赖
yarn install

# 本地开发 启动项目
yarn dev

TIP

强烈建议使用 yarn 安装依赖,避免使用 npm 或者 cnpm 安装,可能会有各种诡异的 bug。

启动完成后,当你看到下面的页面说明你操作成功了。

  • 默认布局

image.png

  • 经典布局

image.png

  • 单栏布局

image.png

  • 全局管理

image.png 接下来你可以修改代码进行业务开发了,本项目内建了常用公共组件、全局路由管理等等各种实用的功能来辅助开发,你可以通过查看已有的工具类和封装方法来使用。

建议

使用前建议将目前项目中已有的配置和文件夹工具类先行查看一番,方便后续使用。

其它

基于vue3-admin-template模版开发管理后台,你可以通过微量的改造来达到符合你司项目的需求。

对于一些开发中常遇到的问题和解决方案欢迎讨论。

欢迎您提供宝贵的意见和建议,也欢迎提 issues 增加和修改功能或组件,另外如果可以的话请给个 start,感谢~