Vbenadmin：内置布局、多主题、全局样式配置的中后台框架

Vbenadmin 是一个基于 Element Plus 的开箱即用的中后台前端/设计解决方案，它集成了各种组件和基础功能，适合于业务需求相对简单的中后台项目开发。 Vbenadmin 内置的布局、多主题、全局样式配置等特性，以及简洁干净的代码结构和文档，让开发变得简单而不简化，享受开箱即用的便捷性。

一、vbenadmin官网

官网地址是：https://github.com/anncwb/vue-element-admin，开源并且在 GitHub 上维护，都可以找到和 Vue 世界相关的内容，包括开发文档、使用文档、API 参考、实例展示等。

Vbenadmin 的特点如下：

简单易用，开箱即用。
内置三种布局，(topmenu/side menu/mix-menu)，布局自适应，可以自由选择多成主题。
国际化，支持多语言。
动态路由，后端控制。
内置多个实用工具类，如加法工具类等
全局样式，主题可配置。

// 安装 vbenadmin
npm install vben-admin -g
// 启动 vbenadmin
vben-admin start

二、vbenadmin教程

Vbenadmin 的教程详见官网，非常详细地阐述了开发细节和使用技巧。其中包括组件、布局、权限控制、插件、主题等许多方面。下面是一个使用 vbenadmin 实现后台登陆的示例。

import { defineComponent, reactive, ref } from 'vue'
import { useValidCode } from '@/utils/validcode'
import { useUserStore } from '@/store/modules/user'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import usePassport from '@/hooks/usePassport'

export default defineComponent({
  name: 'Login',
  setup() {
    const state = reactive({
      formData: {
        username: '',
        password: '',
        code: '',
        uuid: '',
      },
    })

    const usernameRef = ref(null)
    const passwordRef = ref(null)
    const router = useRouter()
    const route = useRoute()
    const userStore = useUserStore()
    const { genImageUrl } = useValidCode()
    const { login, register } = usePassport()
    const submit = async () => {
      const { username, password, code, uuid } = state.formData
      const { data } = await login({
        username: username.trim(),
        password: password.trim(),
        code: code.trim(),
        uuid: uuid.trim(),
      })
      userStore.setToken(data)
      userStore.setExpiresIn(+new Date().getTime() + 1000 * 60 * 60 * 24 * 30)
      router.push(route.query.redirect as string ?? '/')
    }

    return {
      state,
      usernameRef,
      passwordRef,
      submit,
      genImageUrl,
    }
  },
})

三、vbenadmin难吗？

如果你已经对 Vue 有了足够的基础了解，那么 vbenadmin 并不难学，甚至可以说它很容易上手。vbenadmin 面向中后台项目开发，提供布局、多主题、全局样式配置、权限控制等功能，而这些功能都已经集成到框架中，无需再自己开发。这大大节省了开发的时间成本，方便开发者快速迭代业务。

四、vbenadmin真难用？

相较于其他比较轻量级的前端框架，vbenadmin 的功能较为丰富，需要有一定的入门基础。但是，如果你掌握了基本的 Vue 语法、路由、组件使用等知识，再通过查看官方文档，入门 vbenadmin 并不是什么难事。

五、vbenadmin首屏加载慢？

vbenadmin 首次加载时，可能会存在一些资源下载较慢的情况。解决方法是使用懒加载等技术，将一些不常用的组件、甚至路由进行“按需加载”，从而减小首屏加载的压力。这样用户在首次进入应用时就可以看到页面内容，而不是一片空白。

六、vbenadmin后端开发

vbenadmin 前端框架本身并不实现后端功能，因此需要开发者自己根据项目需求来实现。一般情况下，后端开发会配合 vbenadmin 的路由更改、请求参数、API 接口等方面进行开发。有了 vbenadmin 后台模板，可以很方便地进行前后端分离式开发。

七、vbenadmin的record

vbenadmin 内置 “记录” 模块，可以用于业务中记录、存储关键性数据。例如在实际开发中，若需要对一些数据的操作进行记录，可以使用该组件解决这一问题，具体可以查看官网教程。

八、vbenadmin 360浏览器

在使用 vbenadmin 过程中，发现在 360 浏览器中会存在一些样式显示问题，其中一个解决办法是在 index.html 页面中实现以下兼容代码：

<script>
  if (/360[\s\/\d]*(A?e?d?g?e?|Qihu|Chrome|UBrowser)[\s\/\d]*?/i.test(navigator.userAgent)) {
    location.href = 'https://www.baidu.com/s?wd=360%E6%B5%8F%E8%A7%88%E5%99%A8%20%E8%AE%BF%E9%97%AE%E9%97%AE%E9%A2%98'
  }
</script>

九、vbenadmin使用过程中的问题

在使用 vbenadmin 的过程中，开发者可能还会遇到其他问题，例如环境搭建、编辑器的选择、插件的引入、打包等。可以通过阅读 vbenadmin 的官方文档或者社区，以及使用搜索引擎来解决这些问题。

总之，vbenadmin 是一个强大、实用的中后台前端框架，在快速搭建项目的同时，具备多样化的布局、多主题、全局样式配置等特性。开发者可以通过学习文档、实践开发等方式来快速上手，迅速掌握 vbenadmin 的使用技巧和开发技能。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/192919.html