vue3高级指南-基于vue3-admin-template开发vue3管理后台

介绍

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

建议

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

功能

- 登录 / 注销

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

- 多环境发布
  - dev sit stage prod

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

前序准备

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

目录结构

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

├── 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。

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

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

建议

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

其它

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

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

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