Git Product home page Git Product logo

vue3-admin-template's Introduction

vue3-admin-template

介绍

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

建议

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

功能

- 登录 / 注销

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

- 多环境发布
  - dev
  - 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,感谢~

vue3-admin-template's People

Contributors

zhihuifanqiechaodan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

vue3-admin-template's Issues

在dashboard和其他页签切换的时候,keep-alive失效了

打开一个keep-alive缓存的页面A,在打开一个keep-alive缓存的页面B,这两个页面都设置了noCache:false,A,B两个页面互相切换时没有问题,但是一切换到dashboard 时 A个B两个页面的缓存同时就失效了,所以你那个进来的主路由 / 应该只负责跳转,跳转到dashboard页面的新路由就可以了

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.