uni-vue3os-admin：最新原创uniapp+vue3手机os版后台admin管理系统

xiaoyan2015 的个人博客 / 16 / 0 / 创建于 15小时前

最新版原创研发uni-app+vue3+pinia2+uv-ui从0-1搭建仿ios手机界面admin后台系统解决方案。

使用技术

开发工具：HbuilderX4.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端

项目结构目录

uni-vue3-osadmin系统已经同步到我的原创作品集。
uni-app+vue3+pinia2跨端仿ios桌面OA管理系统

公共布局模板

整体布局分为自定义顶部+桌面内容+底部三部分。

<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>