简洁好用的【vue3-admin】后台管理系统【开源项目】

MaofU呀

已于 2023-09-20 16:30:26 修改

阅读量1.1k

点赞数 1

文章标签：开源 vue.js 前端

于 2023-09-20 16:27:35 首次发布

本文链接：https://blog.csdn.net/qq_62595450/article/details/133077955

版权

在线文档

https://www.yuque.com/maofu-rzqcp/snisqw/mtopy4gfmqezmoydhttps://www.yuque.com/maofu-rzqcp/snisqw/mtopy4gfmqezmoyd

项目演示

在线体验地址

vue3-admin-template-combined-apihttp://vue3-admin.webproject.maofu123.top/

视频演示

概览

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/wmv/1694087905309-55475a3b-0d56-4bb5-aa71-692f28d52c3a.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694244040&Signature=Z3hoAXO3x8EVp5vahaJLAKOtOFM%3D

RBAC-访问权限控制

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/wmv/1694237431114-4146909f-d64d-4da7-bf3e-13819eb07c7b.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694244726&Signature=nd2%2Fl6lQMcCjP9yALUnt2GZZwIs%3D

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/wmv/1694089929549-74c348b3-fcac-41ea-856d-a64e32286abd.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694244040&Signature=MlGG9iQ0TYO1OjVUItnCDao6ZL0%3D

图片预览

PC端

登录页面

注册页面

信息提示页

权限管理页

员工列表

角色列表

权限列表

导航栏折叠

移动端

登录页面

注册页面

信息提示页

权限管理页

员工列表

角色列表

权限列表

导航栏展开

功能展示

页面搜索

多语言

暗夜模式

技术栈说明

依赖名	应用于哪些分支	官网
vue3	all	简介 \| Vue.js
vue-cli	all	Vue CLI
element-plus	all	快速开始 \| Element Plus
axios	all	Axios 中文文档 \| Axios 中文网 \| Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js
vuex 4	all	Vuex 是什么？ \| Vuex
vue router	all	Vue Router
mock.js （模拟api接口服务器数据）	除了包含mockjs-pro的分支	Getting Started
mockjs-pro ( 该项目 fork 自 mockjs，修复了 mockjs 中 Mock.mock()不能使用 Promise 和 async 异步函数的 bug。 )	version-RBAC_page version-RBAC_page-S-T version-RBAC_page-S-T-i18n	mockjs-pro
dexie (用于操作IndexedDB数据库)	version-RBAC_page version-RBAC_page-S-T version-RBAC_page-S-T-i18n	Dexie.js - Minimalistic IndexedDB Wrapper
md5 (加密密码传输到服务器)	all	md5
screenfull	all	screenfull
vue-i18n	version-xxx-i18n	Vue I18n \| Vue I18n
day.js	version-RBAC_page version-RBAC_page-S-T version-RBAC_page-S-T-i18n	Day.js · 2kB JavaScript date utility library
xlsx	version-RBAC_page version-RBAC_page-S-T version-RBAC_page-S-T-i18n	xlsx
file-saver （文件下载）	version-RBAC_page version-RBAC_page-S-T version-RBAC_page-S-T-i18n	file-saver
fuse.js(模糊搜索)	version-xxx-search version-xxx-S-T	fuse.js

选择合适你的版本（分支）

分组	分支名称	包含功能
1 基础本版	version-base	路由渲染菜单栏明暗切换全屏
	version-base-i18n	路由渲染菜单栏明暗切换全屏 +i18n国际化

2 实现页面模糊搜索	version-seach	路由渲染菜单栏明暗切换全屏 +页面模糊搜索
	version-search-i18n	路由渲染菜单栏明暗切换全屏 +页面模糊搜索 +i18n国际化

3 实现tags标签栏	version-tagsView	路由渲染菜单栏明暗切换全屏 +tags标签栏
	version-tagsView-i18n	路由渲染菜单栏明暗切换全屏 +tags标签栏 +i18n国际化

4 同时集成页面搜索+tags标签栏	version-search-tagsView	路由渲染菜单栏明暗切换全屏 +页面模糊搜索 +tags标签栏
	version-search-tagsView-i18n	路由渲染菜单栏明暗切换全屏 +页面模糊搜索 +tags标签栏 +i18n国际化

5 实现RBAC访问控制	version-RBAC	路由渲染菜单栏明暗切换全屏 +在`src\\store\\modules\\routes.js`中实现了根据用户权限信息动态添加路由
	version-RBAC-i18n	路由渲染菜单栏明暗切换全屏 +在`src\\store\\modules\\routes.js`中实现了根据用户权限信息动态添加路由 +i18n国际化
	version-RBAC_page	路由渲染菜单栏明暗切换全屏 +实现RBAC管理页面



6 集成页面搜索+tags标签栏+RBAC访问控制	version-RBAC_page-S-T	路由渲染菜单栏明暗切换全屏 +页面模糊搜索 +tags标签栏 +实现RBAC管理页面
	version-RBAC_page-S-T-i18n	路由渲染菜单栏明暗切换全屏 +页面模糊搜索 +tags标签栏 +实现RBAC管理页面 +i18n国际化

快速开始

克隆该项目

例如

 git clone https://gitee.com/tmaofu/back_office_management.git

安装依赖

进入项目目录，打开终端先安装yarn包管理器

npm install -g yarn

再安装项目依赖

yarn install

启动项目

npm start

打包输出

npm run build

使用 eslint 代码规范校验

请根据需要修改.eslintrc.js配置文件。

使用 git cz 提交本地仓库

全局安装Commitizen

npm install -g commitizen@4.2.4

修改文件代码添加到暂存区:

git add .

使用git cz 代替 git commit :

git cz

在合适的时候移除mockjs

当你已经根据api接口文档，完成了一部分api接口的时候，你想要使用自己的api接口进行测试，那么这时候你就可以删除mock的接口。例如你已经完成了注册接口，那么你就可以删除以下mock的接口：

当你已经完成了所有接口时，你可以删除整个mock 文件夹，并在main.js中解除引入：

目录结构说明

顶层目录概览

dist：打包后的文件 node_modules：npm包 public：静态资源，不会被压缩 src：

api：api接口统一管理
assets：存放所需的静态资源
components：存放公用组件
constant：存放常量，如一些键值
directives：存放自定义vue指令
filter：存放过滤器
i18n：实现国际化
layout：实现layout布局页面
mock：拦截api请求，放回mock的数据
router：app路由
store：状态仓库
style：存放通用样式文件
utility：存放工具性质的文件
validator：存放合法性校验的文件
views：存放路由页面

App.vue：根组件
main.js：入口文件
settings.js：该应用的一些配置，可根据需要修改

src目录详解

api：api接口统一管理

├─api
│      permission-manage.js //权限列表管理api
│      read.md
│      role-manage.js //角色列表管理api
│      sys.js
│      user-manage.js //员工列表管理api

assets：存放所需的静态资源

├─assets
│  │  logo.png 
│  │
│  ├─icon
│  │  │  index.js //使webpack打包svg图标
│  │  │
│  │  └─svg
          	//存放svg图标
│  │
│  ├─img
        //存放图片
│  │
│  └─scss
│          reset.scss //清除浏览器默认样式

components：存放公用组件

Breadcrumb

LanguageSwitch

LightDarkSwitch

PageSearch

ScreenFull

SvgIcon

使用方式:
使用icon 这个props进行传参，可接收：
1.图标字体类名
2.svg的url
3.'my-'+本地src/assets/icon/svg中的svg名称,例如：icon="my-login"

TagsView

UploadExcel

constant：存放常量，如一些键值

export const TOKEN = 'token'
export const USERLANGUAGE = 'user-language'

directives：存放自定义vue指令

filter：存放过滤器

import dayjs from 'dayjs'

export function dateFilter(val, format = 'YYYY-MM-DD') {
  if (!isNaN(val)) {
    val = parseInt(val)
  }
  return dayjs(val).format(format)
}

export default function useFilter(vueApp) {
  vueApp.config.globalProperties.$filters = {
    dateFilter
  }
}

i18n：实现国际化

layout：实现layout布局页面

AppMain

NavBar

SideBar

SidebarItem

SidebarMenu

mock：拦截api请求，反回mock（模拟）的数据

├─mock
│  │  index.js //入口文件
│  │  permission-list.js //拦截权限列表相关的api
│  │  role-manage.js //拦截角色列表相关的api
│  │  sys.js //拦截登录，注册相关的api
│  │  user-manage.js //拦截员工列表相关的api
│  │
│  └─IndexedDB
│          index.js //操作IndexedDB数据库的方法

router：app路由

├─router
│      index.js //入口文件，配置路由对象
│      permission.js //定义全局前置导航守卫
│      routes.js //定义 公有路由和私有路由

store：状态仓库

├─store
│  │  getters.js //类似计算属性
│  │  index.js //入口文件
│  │
│  └─modules
│          layout.js //关于layout布局页面的状态仓库
│          routes.js //关于路由的状态仓库
│          user.js //关于用户的状态仓库

style：存放通用样式文件

├─style
│      index.scss
│      mobile.scss //一些通用的全局移动端样式
│      theme-dark.scss //暗夜主题样式
│      theme-filter-invert-dark.scss //使用css-filter 实现暗夜主题样式
│      theme-filter-invert-light.scss //使用css-filter 实现明亮主题样式
│      theme-light.scss //明亮主题样式
│      variables-dark.scss //暗夜主题使用的颜色变量
│      variables-light.scss //明亮主题使用的颜色变量
│      variables.scss //一些样式变量

utility：存放工具性质的文件

├─utility
│      export2Excel.js //导出为excel
│      get-screen-info.js //获取屏幕信息，判断是否是移动端
│      request.js //封装axios
│      resolveBugs.js //解决element-plus 报错问题
│      set-document-title.js //设置文档标题
│      storage.js //封装localStorage

validator：存放合法性校验的文件

├─validator
│      index.js //包含 登录注册密码校验规则

views：存放路由页面

404 Acl

Role

User

Client

Info

Login

Register

App.vue：根组件

<template>
  <div class="app-container">
    <router-view></router-view>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

main.js：入口文件

settings.js：该应用的一些配置，可根据需要修改

import i18n from '@/i18n'
export default {
  /**
   * 页面标题
   */
  pageTile: i18n.$t('src.settings.808362-0'),

  /**
   * 侧边栏
   */
  sideBar: {
    // sideBarLogo: {
    //   isShow: true,
    //   type: 'text', // 'text'or'img'
    //   value: '后台管理系统'
    // },
    sideBarLogo: {
      isShow: true,
      type: 'img', // 'text'or'img'
      value: '/favicon.ico'
    },
    uniqueOpened: true, // 是否只保持一个子菜单的展开
    // 侧边栏宽度
    initWidth: 200, // 初始宽度，填写整数，单位是px
    minDargWidth: 180, // 最小宽度
    maxDargWidth: 250, // 最大宽度
    mobileCollapseToZero: true // 为移动端页面时，收缩侧边栏宽度到0
  },

  /**
   * 顶部导航栏
   */
  narBarFixed: true, // 是否固定导航条
  narBarSeparator: '/' // 面包屑分隔符
}

功能使用指南

根据路由表渲染侧边栏菜单功能

公共路由表与私有路由表

路由表的配置在 src\router\routes.js中，如果要添加公共路由记录请添加在 publicRoutes中，如果要添加私有路由记录请添加在 privateRoutes中。

字段说明

        {
          path: 'client',
          name: 'client-management',
          meta: {
            title: '客户管理',//会显示为菜单名称
            icon: 'my-user'//配置菜单名称左侧的图标，使用自定义SvgIcon组件实现，可选值可以查看SvgIcon组件的说明。
          },
          component: () => import('@/views/Client')
        }

SvgIcon 组件

SvgIcon组件已经在main.js 中进行全局注册，可以直接使用：

// 注册SvgIcon为全局组件
import SvgIcon from '@/components/SvgIcon'

const app = createApp(App)
  .use(store)
  .use(router)
  .use(I18N)
  .use(ElementPlus, elementPlusConf)

app.component('SvgIcon', SvgIcon)

具体实现方式可以查看：**src\components\SvgIcon\index.vue**。使用方式：使用hoverScale这个props可以让鼠标悬浮图标时有缩放效果。使用icon 这个props进行传参，可接收： 1.图标字体类名 2.svg的url 3.'my-'+本地src/assets/icon/svg中的svg名称,例如：icon="my-login"

  <SvgIcon icon="my-login"></SvgIcon>

明暗主题功能

明暗切换组件在 src\components\LightDarkSwitch\index.vue

const isDark = useDark({
  selector: 'html', // 要为哪一个元素添加属性，默认添加的属性名为class。element-plus的drak类必须添加在html标签上
  valueDark: props.normalMode
  ? 'theme-dark dark'
  : 'theme-filter-invert-light theme-filter-invert-dark', // 添加的属性值,drak是 element-plus 的暗夜样式的类（https://element-plus.gitee.io/zh-CN/guide/dark-mode.html）
  valueLight: props.normalMode ? 'theme-light' : 'theme-filter-invert-light'
  })

当切换主题时，会更改html元素上的css类名，以更改不同的样式类，实现不同的样式效果。具体的明暗css样式实现，可以查看和修改 src\style中的文件。

├─style
│      index.scss
│      mobile.scss //一些通用的全局移动端样式
│      theme-dark.scss //暗夜主题样式
│      theme-filter-invert-dark.scss //使用css-filter 实现暗夜主题样式
│      theme-filter-invert-light.scss //使用css-filter 实现明亮主题样式
│      theme-light.scss //明亮主题样式
│      variables-dark.scss //暗夜主题使用的颜色变量
│      variables-light.scss //明亮主题使用的颜色变量
│      variables.scss //一些样式变量

setting.js配置文件

import i18n from '@/i18n'
export default {
  /**
   * 页面标题
   */
  pageTile: i18n.$t('src.settings.808362-0'),

  /**
   * 侧边栏
   */
  sideBar: {
    // sideBarLogo: {
    //   isShow: true,
    //   type: 'text', // 'text'or'img'
    //   value: '后台管理系统'
    // },
    sideBarLogo: {
      isShow: true,
      type: 'img', // 'text'or'img'
      value: '/favicon.ico'
    },
    uniqueOpened: true, // 是否只保持一个子菜单的展开
    // 侧边栏宽度
    initWidth: 200, // 初始宽度，填写整数，单位是px
    minDargWidth: 180, // 最小宽度
    maxDargWidth: 250, // 最大宽度
    mobileCollapseToZero: true // 为移动端页面时，收缩侧边栏宽度到0
  },

  /**
   * 顶部导航栏
   */
  narBarFixed: true, // 是否固定导航条
  narBarSeparator: '/' // 面包屑分隔符
}

pageTile文档标题后缀，可以自行修改，前面会拼接上菜单项的名称，可以在 src\utility\set-document-title.js 中修改拼接行为。

Layout/布局样式

可以自行修改 src\layout中的布局文件。

国际化/i18n功能

具体实现

关于i18n的实现，可以查看如下文件： src\layout\NavBar\index.vue src\components\LanguageSwitch\index.vue src\i18n\index.js

手动添加

添加译文到json文件

在src\i18n\locale\en.json添加英文译文

在src\i18n\locale\zh.json中添加中文译文

注意，此处的key均为：404.index.808362-0

在vue模板中使用

<p>{{ $t('404.index.808362-0') }}</p>

此处的$t方法已经挂载到了全局

在<script setup>中使用

<script setup>

  import i18n from '@/i18n'
  let str = i18n.$t('404.index.808362-0')

<script>

在JS文件中使用

import i18n from '@/i18n'
let str = i18n.$t('404.index.808362-0')

自动提取文字并翻译

对于中文使用者

如果你想要将项目中的中文快速提取并翻译成英文,你可以尝试以下vscode插件: Du I18N (Du I18N - Visual Studio Marketplace) 使用帮助:(分享一个 VSCode 翻译插件（du-i18n） - 掘金)

i18n pro(i18n pro - Visual Studio Marketplace) 使用帮助:(关于vscode插件i18n Ally国内无法使用的问题 - 掘金) 它fork自i18n Ally,提供了百度翻译的API接口配置,对中国开发者来说更加方便.

对于英文使用者

如果你想要将项目中的英文快速提取并翻译成中文,你可以尝试以下这一个vscode插件: i18n Ally

一些配置

如果你使用i18n Ally 或者i18n pro,你可以在项目根目录的.vscode中的settings.json中进行如下配置:

{
  "i18n-ally.localesPaths": ["src/i18n/locale"],
  "i18n-ally.keystyle": "nested",
  "i18n-ally.sortKeys": true,
  // "i18n-ally.namespace": true,
  // "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
  "i18n-ally.enabledParsers": ["json"],
  "i18n-ally.sourceLanguage": "zh",
  "i18n-ally.displayLanguage": "zh",
  "i18n-ally.enabledFrameworks": ["vue", "react"],
  "i18n-ally.extract.autoDetect": true,
  // i18n pro
  "i18n-ally.translate.engines": ["baidu"],
  "i18n-ally.translate.baidu.appid": "百度平台APPID",
  "i18n-ally.translate.baidu.apiSecret": "百度平台分配的密钥",
  "vue.features.codeActions.enable": false
}

版权问题

图片

404，登录，注册中使用的图片均来自该网站 Free to Use Clip Art Images & Vector Illustrations | ManyPixels Illustration Gallery是来自ManyPixels设计团队，完全免费且可商用的一个插画库，可搜索关键字，可以任意改颜色，插画形式也非常舒服，重点是可下载格式有svg和png，非常方便。

图标

该项目中所使用的svg图标均来自该网站 Heroicons Heroicons 是一套由 Tailwind CSS 制作的精美的手绘风格 SVG 图标，适用于各种网站和应用。Heroicons 有三种风格：Outline（描边），Solid（填充）和 Mini（迷你），每种风格都有 292 个图标，共计 876 个图标。Heroicons 支持 React 和 Vue 库，也可以直接在 HTML 中使用。Heroicons 的许可证是 MIT，可以免费使用和修改。

了解更多

API接口文档

开发笔记

MaofU呀

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
简洁好用的【vue3-admin】后台管理系统【开源项目】

使用Vue3组合式API + script setup 语法糖，实现后台管理业务的通用解决方案：路由渲染菜单+页面模糊搜索+全屏+明暗主题切换+RBAC访问控制+i18n国际化。
复制链接

扫一扫