最新原创uniapp-vue3-osadmin手机版后台管理系统

原创

andy2018

发布于 2025-08-25 23:55:56

1050

文章被收录于专栏：h5h5

最新版uni-app+vue3+pinia2+uni-ui跨三端仿ios手机桌面os模式admin后台系统。

uniapp-vue3-oa支持运行到h5+小程序+app端。

uni-vue3os项目整体采用液态模糊背景效果。实现了图表、表格、表单、编辑器、用户管理、角色管理等常用业务场景。

技术知识点

编码工具：HbuilderX 4.75
技术框架：uniapp+vue3+vite5+pinia2
UI组件库：uni-ui+uv-ui（uniapp vue3组件库）
弹框组件：uv3-popup（基于uniapp+vue3自定义弹窗组件）
表格组件：uv3-table（基于uniapp+vue3跨端综合表格组件）
图表组件：qiun-data-charts
模拟数据：mockjs（用于自定义表格模拟数据）
缓存技术：pinia-plugin-unistorage
编译支持：h5+小程序+app端

项目结构目录

使用HbuilderX4.75编辑器搭建项目，vue3 setup语法编码开发。

公共模板

<script setup>
    import { ref } from 'vue'
    import { appStore } from '@/pinia/modules/app'
    
    const appState = appStore()
    
    // #ifdef MP-WEIXIN
    defineOptions({
        options: { virtualHost: true }
    })
    // #endif
    
    const props = defineProps({
        // 是否显示背景图
        showBackground: { type: [Boolean, String], default: true },
    })
    
    // 自定义变量(桌面图标)
    const deskVariable = ref({
        '--icon-radius': '10px', // 圆角
        '--icon-size': '120rpx', // 图标尺寸(设置rpx自定义手机设备)
        '--icon-gap-col': '25px', // 水平间距
        '--icon-gap-row': '45px', // 垂直间距
        '--icon-labelSize': '12px', // 标签文字大小
        '--icon-labelColor': '#fff', // 标签颜色
        '--icon-fit': 'contain', // 图标自适应模式
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1" :style="deskVariable">
        <!-- 顶部插槽 -->
        <slot name="header" />
        
        <!-- 内容区 -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>
        
        <!-- 底部插槽 -->
        <slot name="footer" />
        
        <!-- 背景图(修复小程序不支持background背景图) -->
        <image v-if="showBackground" class="fixwxbg" :src="appState.config.skin || '/static/skin/theme.png'" mode="scaleToFill" />
    </view>
</template>

支持运行到pc端，显示750px布局页面。