Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

这篇具有很好参考价值的文章主要介绍了Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

基于vite4.x+vue3+pinia前端后台管理系统解决方案ViteAdmin

前段时间分享了一篇vue3自研pc端UI组件库VEPlus。这次带来最新开发的基于vite4+vue3+pinia技术栈搭配ve-plus组件库构建的中后台权限管理系统框架。支持vue-i18n国际化多语言、动态路由鉴权、4种布局模板及tab页面缓存等功能。

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

技术栈

  • 编码工具:Cursor+Sublime
  • 框架技术:vite4+vue3+pinia+vue-router
  • UI组件库:ve-plus (基于vue3自研ui组件库)
  • 样式处理:sass^1.58.3
  • 图表组件:echarts^5.4.2
  • 国际化方案:vue-i18n^9.2.2
  • 富文本编辑器组件:wangeditor^4.7.15
  • markdown编辑器:md-editor-v3^2.11.0
  • 数据模拟:mockjs^1.1.0

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

功能点

  1. 最新前端技术栈vite4、vue3、pinia、vue-router、vue-i18n、ve-plus。
  2. 支持中文/英文/繁体多语言模式切换。
  3. 支持表格单选/多选、边框/隔行换色、横向/纵向虚拟滚动条等功能。
  4. 搭配高颜值的vue3-plus组件库,风格更加统一。
  5. 内置多个模板布局样式
  6. 支持动态路由权限控制
  7. 支持tabs动态路由缓存
  8. 高效率开发,整个框架已经搭建完毕,只需定制化相应模块即可。

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

项目页面结构

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

整体采用vue3 setup语法糖模式开发,搭配ve-plus轻量级组件库,使得界面清新且运行极速。

效果图

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vue3 UI  VEPlus组件

ve-plus:基于vue3开发的pc端组件库,包含了40+常用的功能组件,易于上手。

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

veplus整合了vue3.js开发的两个独立插件vue3-layer弹窗vue3-scrollbar虚拟滚动条组件。

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

快速安装

npm install ve-plus -S
cnpm install ve-plus -S
yarn add ve-plus

具体的使用方法,大家可以去看看这篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/17170454.html

Vite-Admin布局模块

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

公共布局文件在layouts目录,提供了4种经典的布局模板。

<script setup>
    import { computed } from 'vue'
    import { appStore } from '@/store/modules/app'

    // 引入布局模板
    import Classic from './layout/classic/index.vue'
    import Columns from './layout/columns/index.vue'
    import Vertical from './layout/vertical/index.vue'
    import Transverse from './layout/transverse/index.vue'

    const store = appStore()
    const config = computed(() => store.config)

    const LayoutConfig = {
        classic: Classic,
        columns: Columns,
        vertical: Vertical,
        transverse: Transverse
    }
</script>

<template>
    <div class="veadmin__container" :style="{'--themeSkin': store.config.skin}">
        <component :is="LayoutConfig[config.layout]" />
    </div>
</template>

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

主模板main.vue提供了Permission权限控制及KeepAlive路由缓存

<!-- 主缓存模板 -->
<script setup>
    import { ref } from 'vue'
    import { useRoutes } from '@/hooks/useRoutes'
    import { tabsStore } from '@/store/modules/tabs'

    import Permission from '@/components/Permission.vue'
    import Forbidden from '@/views/error/forbidden.vue'

    const { route } = useRoutes()
    const store = tabsStore()
</script>

<template>
    <Scrollbar autohide gap="2">
        <div class="ve__layout-main__wrapper">
            <!-- 路由鉴权 -->
            <Permission :roles="route?.meta?.roles">
                <template #tips>
                    <Forbidden />
                </template>
                <!-- 路由缓存 -->
                <router-view v-slot="{ Component }">
                    <transition name="ve-slide-right" mode="out-in" appear>
                        <KeepAlive :include="store.cacheViews">
                            <component v-if="store.reload" :is="Component" :key="route.path" />
                        </KeepAlive>
                    </transition>
                </router-view>
            </Permission>
        </div>
    </Scrollbar>
</template>

自定义路由菜单RouteMenu

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例 Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例 Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

如上图:路由菜单组件只需传入配置参数,即可切换不同的模式。

<RouteMenu :rootRouteEnable="false" />
<RouteMenu
    rootRouteEnable
    collapsed
    background="#292d3e"
    backgroundHover="#353b54"
    color="rgba(235,235,235,.7)"
/>
<RouteMenu
    mode="horizontal"
    background="#292d3e"
    backgroundHover="#353b54"
    color="rgba(235,235,235,.7)"
/>

RouteMenu.vue模板

<!-- 路由菜单 -->
<script setup>
  import { ref, computed, h, watch, nextTick } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { Icon, useLink } from 've-plus'
  import { useRoutes } from '@/hooks/useRoutes'
  import { appStore } from '@/store/modules/app'

  // 引入路由集合
  import mainRoutes from '@/router/modules/main.js'

  const props = defineProps({
    // 菜单模式(vertical|horizontal)
    mode: { type: String, default: 'vertical' },
    // 是否开启一级路由菜单
    rootRouteEnable: { type: Boolean, default: true },
    // 是否要收缩
    collapsed: { type: Boolean, default: false },

    // 菜单背景色
    background: String,
    // 滑过背景色
    backgroundHover: String,
    // 菜单文字颜色
    color: String,
    // 菜单激活颜色
    activeColor: String
  })

  const { t } = useI18n()
  const { jumpTo } = useLink()
  const { route, getActiveRoute, getCurrentRootRoute, getTreeRoutes } = useRoutes()
  const store = appStore()

  const rootRoute = computed(() => getCurrentRootRoute(route))
  const activeKey = ref(getActiveRoute(route))
  const menuOptions = ref(getTreeRoutes(mainRoutes))
  const menuFilterOptions = computed(() => {
    if(props.rootRouteEnable) {
      return menuOptions.value
    }
    // 过滤掉一级菜单
    return menuOptions.value.find(item => item.path == rootRoute.value && item.children)?.children
  })
  console.log('根路由地址::>>', rootRoute.value)
  console.log('过滤后路由地址::>>', menuFilterOptions.value)

  watch(() => route.path, () => {
    nextTick(() => {
      activeKey.value = getActiveRoute(route)
    })
  })

  // 批量渲染图标
  const batchRenderIcon = (option) => {
    return h(Icon, {name: option?.meta?.icon})
  }

  // 批量渲染标题
  const batchRenderLabel = (option) => {
    return t(option?.meta?.title)
  }

  // 路由菜单更新
  const handleUpdate = ({key}) => {
    jumpTo(key)
  }
</script>

<template>
  <Menu
    class="veadmin__menus"
    v-model="activeKey"
    :options="menuFilterOptions"
    :mode="mode"
    :collapsed="collapsed && store.config.collapse"
    iconSize="18"
    key-field="path"
    :renderIcon="batchRenderIcon"
    :renderLabel="batchRenderLabel"
    :background="background"
    :backgroundHover="backgroundHover"
    :color="color"
    :activeColor="activeColor"
    @change="handleUpdate"
    style="border: 0;"
  />
</template>

vue-i18n国际化解决方案

vite-admin支持中英文/繁体三种语言模式,使用 "vue-i18n": "^9.2.2" 组件。

 Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

/**
 * 国际化配置
 * @author YXY
 */

import { createI18n } from 'vue-i18n'
import { appStore } from '@/store/modules/app'

// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

// 默认语言
export const langVal = 'zh-CN'

export default async (app) => {
    const store = appStore()
    const lang = store.lang || langVal

    const i18n = createI18n({
        legacy: false,
        locale: lang,
        messages: {
            'en': enUS,
            'zh-CN': zhCN,
            'zh-TW': zhTW
        }
    })
    
    app.use(i18n)
}

Lang.vue模板

<script setup>
  import { ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import { appStore } from '@/store/modules/app'
  
  const { locale } = useI18n()
  const store = appStore()

  const langVal = ref(locale.value)
  const langOptions = ref([
    {key: "zh-CN", label: "简体中文"},
    {key: "zh-TW", label: "繁体字"},
    {key: "en", label: "英文"},
  ])

  const changeLang = () => {
    // 设置locale语言
    locale.value = langVal.value
    store.lang = locale.value
    // store.setLang(locale.value)
  }
</script>

<template>
  <Dropdown v-model="langVal" :options="langOptions" placement="bottom" @change="changeLang">
    <div class="toolbar__item"><Icon name="ve-icon-lang" size="20" cursor /></div>
    <template #label="{item}">
      <div>
        {{item.label}} <span style="color: #999; font-size: 12px;">{{item.key}}</span>
      </div>
    </template>
  </Dropdown>
</template>

Vue3动态图表Hooks

vite-admin支持动态图表,使用 "echarts": "^5.4.2" 组件。

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

/**
 * 动态图表Hooks
 * @author YXY
 */

import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import { useResizeObserver } from 've-plus'

export function useEcharts(node, options) {
    let chartNode
    let chartRef = ref(null)

    const resizeHandle = () => {
        chartNode && chartNode.resize()
    }

    onMounted(() => {
        if(node.value) {
            chartNode = echarts.init(node.value)
            chartNode.setOption(options)
            chartRef.value = chartNode
        }
    })

    onBeforeUnmount(() => {
        chartNode.dispose()
    })
    // 自适应图表
    useResizeObserver(node, resizeHandle)

    return chartRef
}

通过useResizeObserver函数,支持图表自适应大小。

网站动态标题title

通过监听路由route更改,动态设置网站标题。

/**
 * 设置网站标题
 * @author YXY
 */

import { watch, unref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'

export function useTitle() {
    const { VITE_APP_TITLE } = import.meta.env
    const { currentRoute } = useRouter()
    const { t, locale } = useI18n()
    
    watch(
        () => [currentRoute.value.path, locale.value],
        () => {
            console.log('开始监听标题变化........')
            
            const route = unref(currentRoute)
            const title = route?.meta?.title ? `${t(route?.meta?.title)} - ${VITE_APP_TITLE}` : VITE_APP_TITLE
            console.log('监听标题', title)
            document.title = title
        },
        {immediate: true}
    )
}

动态路由缓存

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

ve-admin支持keepalive路由缓存功能。使用 pinia 替代 vuex 状态管理,使用 pinia-plugin-persistedstate 持久化存储。

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

TabsView.vue模板

<script setup>
  import { ref, computed, watch, nextTick, h } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useI18n } from 'vue-i18n'
  import { appStore } from '@/store/modules/app'
  import { tabsStore } from '@/store/modules/tabs'

  const { t } = useI18n()
  const router = useRouter()
  const route = useRoute()

  const app = appStore()
  const store = tabsStore()

  const tabKey = ref(route.path)
  const tabOptions = computed(() => store.tabViews)

  // 滚动到当前路由
  const scrollToActiveRoute = () => {
    nextTick(() => {
      const activeRef = scrollbarRef.value.scrollbarWrap.querySelector('.actived').offsetLeft
      scrollbarRef.value.scrollTo({left: activeRef, top: 0, behavior: 'smooth'})
    })
  }

  // 监听路由(增加标签/缓存)
  watch(() => route.path, () => {
    tabKey.value = route.path

    const params = {
      path: route.path,
      name: route.name,
      meta: {
        ...route.meta
      }
    }
    store.addTabs(params)
    scrollToActiveRoute()
  }, {
    immediate: true
  })

  // 右键菜单
  const scrollbarRef = ref()
  const selectedTab = ref({})
  const contextmenuRef = ref()
  const contextmenuOptions = ref([
    { key: 'refresh', icon: 've-icon-reload', label: 'tabview__contextmenu-refresh' },
    { key: 'close', icon: 've-icon-close', label: 'tabview__contextmenu-close' },
    { key: 'closeLeft', icon: 've-icon-logout', label: 'tabview__contextmenu-closeleft' },
    { key: 'closeRight', icon: 've-icon-logout1', label: 'tabview__contextmenu-closeright' },
    { key: 'closeOther', icon: 've-icon-retweet', label: 'tabview__contextmenu-closeother' },
    { key: 'closeAll', icon: 've-icon-close-square', label: 'tabview__contextmenu-closeall' },
  ])
  const handleRenderLabel = (option) => {
    return t(option?.label)
  }

  // 是否第一个标签
  const isFirstTab = () => {
    return selectedTab.value.path === store.tabViews[0].path || selectedTab.value.path === '/home/index'
  }
  // 是否最后一个标签
  const isLastTab = () => {
    return selectedTab.value.path === store.tabViews[store.tabViews.length - 1].path
  }

  const openContextMenu = (tab, e) => {
    selectedTab.value = tab
    contextmenuOptions.value[1].disabled = tab.meta?.isAffix
    contextmenuOptions.value[2].disabled = isFirstTab()
    contextmenuOptions.value[3].disabled = isLastTab()

    // 设置坐标
    contextmenuRef.value.setPos(e.clientX, e.clientY)
    contextmenuRef.value.show()
  }

  const changeContextMenu = (v) => {
    if(v.key == 'refresh') {
      if(tabKey.value !== selectedTab.value.path) {
        router.push(selectedTab.value.path)
      }
      store.reloadTabs()
      return
    }else if(v.key == 'close') {
      store.removeTabs(selectedTab.value)
    }else if(v.key == 'closeLeft') {
      store.removeLeftTabs(selectedTab.value)
    }else if(v.key == 'closeRight') {
      store.removeRightTabs(selectedTab.value)
    }else if(v.key == 'closeOther') {
      store.removeOtherTabs(selectedTab.value)
    }else if(v.key == 'closeAll') {
      store.clearTabs()
    }
    updateTabRoute()
  }

  // 跳转更新路由
  const updateTabRoute = () => {
    const lastTab = store.tabViews.slice(-1)[0]
    if(lastTab && lastTab.path) {
      router.push(lastTab.path)
    }else {
      router.push('/')
    }
  }
  // 切换tab
  const changeTab = (tab) => {
    router.push(tab.path)
  }
  // 关闭tab
  const closeTab = (tab) => {
    store.removeTabs(tab)
    updateTabRoute()
  }
</script>

<template>
  <div v-if="app.config.tabsview" class="veadmin__tabsview">
    <Scrollbar ref="scrollbarRef" mousewheel>
      <ul class="tabview__wrap">
        <li
          v-for="(tab,index) in tabOptions" :key="index"
          :class="{'actived': tabKey == tab.path}"
          @click="changeTab(tab)"
          @contextmenu.prevent="openContextMenu(tab, $event)"
        >
          <Icon class="tab-icon" :name="tab.meta?.icon" />
          <span class="tab-title">{{$t(tab.meta?.title)}}</span>
          <Icon v-if="!tab.meta?.isAffix" class="tab-close" name="ve-icon-close" @click.prevent.stop="closeTab(tab)" />
        </li>
      </ul>
    </Scrollbar>
  </div>
  <!-- 右键菜单 -->
  <Dropdown
    ref="contextmenuRef"
    trigger="manual"
    :options="contextmenuOptions"
    fixed="true"
    :render-label="handleRenderLabel"
    @change="changeContextMenu"
    style="height: 0;"
  />
</template>

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

/**
 * 状态管理 Pinia
 */

import { createPinia } from 'pinia'
// 引入pinia本地持久化存储
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia
/**
 * 标签栏缓存状态管理
 * 在setup store中
 * ref() 就是 state 属性
 * computed() 就是 getters
 * function() 就是 actions
 * @author YXY
 * Q:282310962 WX:xy190310
 */

import { ref, nextTick } from 'vue'
import { useRoute } from 'vue-router'
import { defineStore } from 'pinia'
import { appStore } from '@/store/modules/app'

export const tabsStore = defineStore('tabs', () => {
        const currentRoute = useRoute()
        const store = appStore()

        /*state*/
        const tabViews = ref([]) // 标签栏列表
        const cacheViews = ref([]) // 缓存列表
        const reload = ref(true) // 刷新标识

        // 判断tabViews某个路由是否存在
        const tabIndex = (route) => {
            return tabViews.value.findIndex(item => item?.path === route?.path)
        }

        /*actions*/
        // 新增标签
        const addTabs = (route) => {
            const index = tabIndex(route)
            if(index > -1) {
                tabViews.value.map(item => {
                    if(item.path == route.path) {
                        // 当前路由缓存
                        return Object.assign(item, route)
                    }
                })
            }else {
                tabViews.value.push(route)
            }

            // 更新keep-alive缓存
            updateCacheViews()
        }

        // 移除标签
        const removeTabs = (route) => {
            const index = tabIndex(route)
            if(index > -1) {
                tabViews.value.splice(index, 1)
            }
            updateCacheViews()
        }

        // 移除左侧标签
        const removeLeftTabs = (route) => {
            const index = tabIndex(route)
            if(index > -1) {
                tabViews.value = tabViews.value.filter((item, i) => item?.meta?.isAffix || i >= index)
            }
            updateCacheViews()
        }

        // 移除右侧标签
        const removeRightTabs = (route) => {
            const index = tabIndex(route)
            if(index > -1) {
                tabViews.value = tabViews.value.filter((item, i) => item?.meta?.isAffix || i <= index)
            }
            updateCacheViews()
        }

        // 移除其它标签
        const removeOtherTabs = (route) => {
            tabViews.value = tabViews.value.filter(item => item?.meta?.isAffix || item?.path === route?.path)
            updateCacheViews()
        }

        // 移除所有标签
        const clearTabs = () => {
            tabViews.value = tabViews.value.filter(item => item?.meta?.isAffix)
            updateCacheViews()
        }

        // 更新keep-alive缓存
        const updateCacheViews = () => {
            cacheViews.value = tabViews.value.filter(item => store.config.keepAlive || item?.meta?.isKeepAlive).map(item => item.name)
            console.log('cacheViews缓存路由>>:', cacheViews.value)
        }

        // 移除keep-alive缓存
        const removeCacheViews = (route) => {
            cacheViews.value = cacheViews.value.filter(item => item !== route?.name)
        }

        // 刷新路由
        const reloadTabs = () => {
            removeCacheViews(currentRoute)
            reload.value = false
            nextTick(() => {
                updateCacheViews()
                reload.value = true
                document.documentElement.scrollTo({ left: 0, top: 0 })
            })
        }

        // 清空缓存
        const clear = () => {
            tabViews.value = []
            cacheViews.value = []
        }

        return {
            tabViews,
            cacheViews,
            reload,
            addTabs,
            removeTabs,
            removeLeftTabs,
            removeRightTabs,
            removeOtherTabs,
            clearTabs,
            reloadTabs,
            clear
        }
    },
    // 本地持久化存储(默认存储localStorage)
    {
        // persist: true
        persist: {
            storage: localStorage,
            paths: ['tabViews', 'cacheViews']
        }
    }
)

vite.config.js配置文件

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { wrapEnv } from './src/utils/env'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
    const viteEnv = loadEnv(mode, process.cwd())
    const env = wrapEnv(viteEnv)

    return {
        plugins: [vue()],

        // base: '/',
        // mode: 'development', // development|production

        /*构建选项*/
        build: {
            // minify: 'esbuild', // 打包方式 esbuild(打包快)|terser
            // chunkSizeWarningLimit: 2000, // 打包大小警告
            // rollupOptions: {
            //     output: {
            //         chunkFileNames: 'assets/js/[name]-[hash].js',
            //         entryFileNames: 'assets/js/[name]-[hash].js',
            //         assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
            //     }
            // }
        },
        esbuild: {
            // 打包去除 console.log 和 debugger
            drop: env.VITE_DROP_CONSOLE ? ['console', 'debugger'] : []
        },

        /*开发服务器选项*/
        server: {
            // 端口
            port: env.VITE_PORT,
            // 是否浏览器自动打开
            open: env.VITE_OPEN,
            // 开启https
            https: env.VITE_HTTPS,
            // 代理配置
            proxy: {
                // ...
            }
        },

        resolve: {
            // 设置别名
            alias: {
                '@': resolve(__dirname, 'src'),
                '@assets': resolve(__dirname, 'src/assets'),
                '@components': resolve(__dirname, 'src/components'),
                '@views': resolve(__dirname, 'src/views'),
                // 解决vue-i18n警告提示:You are running the esm-bundler build of vue-i18n.
                'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js'
            }
        }
    }
})

Okra,基于 vite4.x+pinia+vePlus 开发后台管理系统模板就分享到这里,希望对大家有些帮助哈~~ 💖

最后附上两个最近实例项目

https://www.cnblogs.com/xiaoyan2017/p/16830689.html

https://www.cnblogs.com/xiaoyan2017/p/16701624.html

Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例

 文章来源地址https://www.toymoban.com/news/detail-412559.html

到了这里,关于Vite-Admin后台管理系统|vite4+vue3+pinia前端后台框架实例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3.3 + Vite4.3 + TypeScript5+ Element-Plus:从零到一构建企业级后台管理系统(前后端开源)

    vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案,技术栈为 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等当前主流框架。 相较于其他管理前端框架,vue3-element-admin 的优势在于 一有一无 (有配套后端、无复杂封装): 配套完整 Java 后

    2024年02月09日
    浏览(143)
  • 开源后台管理系统Geekplus Admin

    本系统采用前后端分离开发模式,后端采用springboot开发技术栈,mybatis持久层框架,redis缓存,shiro认证授权框架,freemarker模版在线生成代码,websocket消息推送等,后台管理包含用户管理,角色管理,菜单权限管理,部门组织管理,通知管理,日志管理,系统监控,在线用户,

    2024年02月12日
    浏览(47)
  • 开源后台管理系统 (go-vue-admin)

    go-vue-admin 是一套基于go语言开源的后台管理系统。功能参考诺依网站 ,前后端分离。 前端采用vue3、Element Plus 、RuoYi-Vue3 后端采用gofrome 框架、mysql、redis、Jwt 实现了一键生成前后端代码,高效开发。 用户管理:用户是系统操作者,该功能主要完成系统用户配置。 部门管理:

    2024年02月07日
    浏览(50)
  • 后台管理系统模板推荐(vue-element-admin)

    vue-element-admin 是基于vue 和 Element-ui 的一套后台管理系统集成的模板 GitHub地址: https://github.com/PanJiaChen/vue-element-admin 项目在线预览: https://panjiachen.gitee.io/vue-element-admin 由尚硅谷提供的 登录页面 主页面 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库,方便程序员进行页

    2024年02月16日
    浏览(55)
  • Naive UI Admin后台管理系统的组件BasicTable使用指南

    Naive Ui Admin 是一个基于 Vue3.0、 Vite、 Naive UI、 TypeScript 的中后台解决方案,它使用了最新的前端技术栈,并提炼了典型的业务模型,页面,包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能,它可以帮助你快速搭建企业级中后台项目, 相信不管是从新技术使用

    2024年02月09日
    浏览(100)
  • Tauri-Admin通用后台管理系统|tauri+vue3+pinia桌面端后台EXE

    基于 tauri+vite4+pinia2 跨端后台管理系统应用实例 TauriAdmin 。 tauri-admin 基于最新跨端技术  Tauri Rust webview2  整合  Vite4  构建桌面端通用后台管理解决方案。 搭载轻量级ve-plus组件库 、支持 多窗口切换管理、vue-i18n多语言包、动态路由权限、常用业务功能模块、3种布局模板及动

    2024年02月15日
    浏览(39)
  • 搭建后台管理系统模板(v3+ts+vite)

    目录 项目初始化 环境准备 初始化项目 项目配置 一、eslint配置 .eslint.cjs配置文件  vue3环境代码校验插件 安装指令 修改.eslintrc.cjs配置文件  .eslintignore忽略文件 1.4运行脚本  二、配置prettier  2.1安装依赖包 2.2.prettierrc.json添加规则  2.3.prettierignore忽略文件  三、配置stylelint

    2024年02月07日
    浏览(33)
  • vite-admin框架搭建,ESLint + Prettier 语法检测和代码格式化

    开发工具: vs code node: 20.10.0 npm: 10.2.3 UI框架: Element-plus gitee地址: 搭建一个新的vite项目 搭建完成执行命令后如图所示 安装完后项目目录为 1.1 安装插件 1.2 初始化ESLint 安装后生成 .eslintrc.cjs 文件, 配置如下: 2.1 安装插件 2.2 配置Prettier 根目录下创建.prettierrc.cjs文件 .prett

    2024年02月02日
    浏览(74)
  • 基于react18+vite4+arco.design搭建极简版后台管理模板

    趁着国庆前夕整了一个 vite4 结合 react18 搭建后台管理模板,搭配上字节团队react组件库 ArcoDesign ,整体操作功能非常丝滑。目前功能 支持多种模板布局、暗黑/亮色模式、国际化、权限验证、多级路由菜单、tabview标签栏快捷菜单、全屏控制 等功能。极简非凡的布局界面、高定

    2024年02月08日
    浏览(48)
  • vue-element-admin:基于element-ui 的一套后台管理系统集成方案

    1.1简介 vue-element-admin是基于element-ui 的一套后台管理系统集成方案。 GitHub地址:https://github.com/PanJiaChen/vue-element-admin 项目在线预览:https://panjiachen.gitee.io/vue-element-admin 1.2安装 如果上面的install报错 则先执行下面的命令,再install 2.1简介 vueAdmin-template是基于vue-element-admin的一套

    2023年04月16日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包