@erye/vaf NPM | npm.io

@erye/vaf

抽离出通用的 UI 和逻辑单独封装成包，通过传入配置快速搭建成型通用的管理后台应用，帮助你专注于业务代码开发。

快速搭建 vaf 项目

执行下面命令，使用 @erye/create-vaf 生成代码模板，

# 在当前工作空间下生成
$ npm create @erye/vaf

# 或在当前工作空间的helloworld目录下生成
$ npm create @erye/vaf helloworld

使用示例

import "element-plus/dist/index.css";
import "@erye/vaf/dist/index.css";

import ElementPlus from "element-plus";
import { createVafApp } from "@erye/vaf";

const { app } = createVafApp({
  settingConfig: {
    name: "@erye/vaf",
    slogan: "方便、快捷、精准",
    logo: "/logo.png",
    copyright: "本网站属于个人技术分享网站",
  },
  dataFuncConfig: {
    login: AuthService.login,
    getUserinfo: AuthService.getUserinfo,
    logout: AuthService.logout,
  },
  sidebarConfig: {
    logo: "/logo.png", // 左侧菜单的logo
    menus: [
      {
        // type: router-link => 路由, http-link => 超链接目标的 URL
        // 可以有children，即可以有子菜单
        type: "router-link",
        // id与路由配置的VafId相互对应,
        // 当切换路由时, 程序内部根据id与VafId来找到匹配的菜单,
        // 将它们加上高亮样式.
        id: "/home",
        path: '/home',
        title: "首页",
        children: [],
        // 是否隐藏显示，默认为false
        hidden: false,
        // 依赖这2个字段方式，来完成左侧菜单的角色过滤
        authLevel: 2, // 0=>匿名 | 1=>登录(默认) | 2=>需鉴别角色
        authRoles: ["super-admin"], // 当鉴权等级为2时，该字段才有效，默认为空数组
      },
      {
        type: "http-link",
        path: "https://staging-cn.vuejs.org/",
        title: "Vue3",
      },
    ],
  },
  routeConfig: {
    mode = "hash", // hash || history
    base = "/",
    // vaf约束的路由配置，会插在VafPageLayout中。
    // 约束只能使用一个层级的路由, 也就是不能有children选项。
    pageRoutes: [
      {
        path: "/home",
        meta: {
          VafId: "/home",
          VafAuthLevel: 1,
          title: "首页",
        },
        component: () => import("./pages/Home.vue"),
      },
      {
        path: "/super-admin/admin",
        meta: {
          VafId: "/super-admin/admin",
          // 依赖这2个字段方式，来完成路由的鉴权
          VafAuthLevel: 2, // 0=>匿名 | 1=>登录(默认) | 2=>需鉴别角色
          VafAuthRoles: ["super-admin"], // 当鉴权等级为2时，该字段才有效，默认为空数组
          title: "管理员",
        },
        component: () => import("./pages/SuperAdmin/Admin.vue"),
      },
    ],
    // 原生的路由配置，不做约束，可以使用多层级路由。
    vanillaRoutes: [
      {
        redirect: "/home",
        path: "/",
        name: "/",
      },
      {
        path: "/helloworld",
        name: "/helloworld",
        meta: {
          // VafId与sidebarConfig.menus里的菜单的id相互对应,
          // 当切换路由时, 程序内部根据VafId来找到sidebarConfig.menus里对应的菜单,
          // 将它们加上高亮样式.
          VafId: "/helloworld",

          // 依赖这2个字段方式，来完成路由的鉴权
          VafAuthLevel: 0, // 0=>匿名 | 1=>登录(默认) | 2=>需鉴别角色
          VafAuthRoles: [], // 当鉴权等级为2时，该字段才有效，默认为空数组

          title: "Hello World",
        },
        component: () => import("./pages/HelloWorld.vue"),
      },
    ],
    // 路由守卫函数参数与VueRouter的保持一致 https://router.vuejs.org/zh/api/#aftereach
    globalNavigationGuards: {
      // beforeEach() {}, // 如果设置了，会覆盖内置的beforeEach守卫
      // afterEach() {},// 如果设置了，会覆盖内置的afterEach守卫
      // beforeResolve() {},
      // onError() {},
    },
  },
});
app.use(ElementPlus);
app.mount("#app");