后台开源免费模板开发文档，你还在犹豫什么？

《开源精选》是我们分享 Github、Gitee 等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是基于 vue3.x 的后台开源模板开发文档。

介绍

vue-next-admin 是一个基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。

环境支持

由于 Vue3 不再支持 IE11，故而 ElementPlus 也不支持 IE11 及之前版本。

使用说明

代码仓库

vue3.x 版本：
https://gitee.com/lyt-top/vue-next-admin

vue2.x 版本：
https://gitee.com/lyt-top/vue-next-admin/tree/vue-prev-admin

安装 cnpm、yarn

复制代码(桌面 cmd 运行)

npm install -g cnpm --registry=https://registry.npm.taobao.org

或者

npm install -g yarn

运行项目

建议使用 cnpm，因为 yarn 有时会报错。

# 克隆项目
git clone https://gitee.com/lyt-top/vue-next-admin.git

# 进入项目
cd vue-next-admin

# 安装依赖
cnpm install

# 运行项目
cnpm run dev

# 打包发布
cnpm run build

菜单配置

• 前端控制：/@/router/route.ts 修改菜单数据
• 后端控制：需先去 /@/store/modules/themeConfig.ts 下开启 isRequestRoutes: true，然后去 /@/api/menu/index.ts 中修改接口拿菜单数据

参数说明

{
  // 菜单路径，用于跳转
  path: '/home',
  // 菜单 name，用于界面 keep-alive 路由缓存。
  // 此 name 需要与 component 组件中的 name 值相同（唯一）
  name: 'home',
  // 组件路径
  component: () => import('/@/views/home/index.vue'),
  // 附加自定义数据
  meta: {
    // 菜单标题（国际化写法）
    title: 'message.router.home',
    // 菜单外链链接
    // 开启外链条件，`1、isLink: true 2、链接地址不为空（meta.isLink） 3、isIframe: false`
    isLink: '',
    // 菜单是否隐藏（菜单不显示在界面，但可以进行跳转）
    isHide: false,
    // 菜单是否缓存
    isKeepAlive: true,
    // 菜单是否固定（固定在 tagsView 中，不可进行关闭），右键菜单无 `关闭` 项
    isAffix: true,
    // 是否内嵌
    // 开启条件，`1、isIframe: true 2、链接地址不为空（meta.isLink）`
    isIframe: false,
    // 当前路由权限标识，取角色管理。控制路由显示、隐藏。超级管理员：admin 普通角色：common
    // 之前 auth 取用户（角色下有多个用户）
    roles: ['admin', 'common'],
    // 菜单图标
    icon: 'iconfont icon-shouye',
    // 自行再添加
    ...
  },
}

菜单格式

{
  // 顶级菜单路径
  path: '/',
  // 顶级菜单 name
  name: '/',
  // 顶级路由出口
  component: () => import('/@/layout/index.vue'),
  // 顶级菜单重定向路径
  redirect: '/home',
  // 顶级附加自定义数据
  meta: {
    // 顶级菜单是否缓存
    isKeepAlive: true,
  },
  // 顶级菜单的子级菜单数据
  children: [
    // 新增的菜单对象写在这里
    {
      ...
    }
  ]
}

布局配置

布局不生效

• 清空浏览器永久缓存或者点击布局配置-一键恢复默认，前提是修改了 /@/store/modules/themeConfig.ts 配置文件内容。
• 布局配置组件路径：/@/layout/navBars/breadcrumb/setings.vue。
• 添加或者修改功能，请前往 /@/layout/navBars/breadcrumb/setings.vue 组件位置修改

界面预览

• vue3.x 版本预览（vue-next-admin）：https://lyt-top.gitee.io/vue-next-admin-preview/#/login
• vue2.x 版本预览（vue-prev-admin）：https://lyt-top.gitee.io/vue-prev-admin-preview/#/login