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/zh-hant/n/192919.html