UI Mobile 功能包（`@vup/ui-mobile`）

@vup/ui-mobile 是 VUP 的移动端 UI 封装层，基于 Ionic Vue，统一导出 VM* 前缀组件与方法型 API。它默认用于 capacitor-template。

定位

移动优先与混合应用使用 @vup/ui-mobile。
桌面 Web 与后台管理类应用使用 @vup/ui。
业务代码优先使用 VM* 组件，不直接引入 Ion*。
保持薄封装，业务逻辑留在应用层。

技术栈

Vue 3 - 应用框架（文档）
Ionic Vue - 移动端 UI 与导航基础能力（文档）
@ionic/vue-router - Ionic 路由集成（文档）
Ionicons - Ionic 图标集（文档）
Capacitor - 混合应用原生运行时（文档）

安装

bash

vup use my-ui-mobile
# 选择 @vup/ui-mobile

也可以在应用内直接安装：

bash

pnpm add @vup/ui-mobile

全局注册

import { createApp } from 'vue';
import App from './App.vue';
import VMUI from '@vup/ui-mobile';

const app = createApp(App);
app.use(VMUI);
app.mount('#app');

路由要求

使用 VMRouterOutlet 时，必须用 @ionic/vue-router 创建路由：

import { createRouter, createWebHistory } from '@ionic/vue-router';
import routes from './routes';

export default createRouter({
  history: createWebHistory(),
  routes,
});

如果用普通 vue-router 创建 Ionic 页面栈，可能出现 navManager 或 viewStacks 注入缺失警告。

页面结构

vue

<template>
  <VMPage>
    <VMHeader>
      <VMToolbar>
        <VMTitle>Title</VMTitle>
      </VMToolbar>
    </VMHeader>

    <VMContent fullscreen>
      <!-- 业务内容 -->
    </VMContent>
  </VMPage>
</template>

VMToolbar 放在 VMHeader 或 VMFooter 内；卡片、列表、表单等业务内容放在 VMContent 内。

常用组件

VMButton
VMPage
VMHeader、VMToolbar、VMTitle
VMRouterOutlet
VMContent
VMList、VMItem
VMCard、VMCardHeader、VMCardTitle、VMCardContent
VMSegment、VMSegmentButton

方法型 API

import { VMAlert, VMLoading, VMToast } from '@vup/ui-mobile';

await VMToast('保存成功');
await VMAlert({ header: '提示', message: '操作完成', buttons: ['确定'] });

const loading = await VMLoading({ message: '处理中...' });
await loading.dismiss();

UI Mobile 功能包（@vup/ui-mobile） ​

定位 ​

技术栈 ​

安装 ​

全局注册 ​

路由要求 ​

页面结构 ​

常用组件 ​

方法型 API ​

相关阅读 ​