🚀Uni-app 也能像 Vue 一样用 App.vue？这款插件做到了！

在使用 uni-app 的过程中，你是否也曾经历过这样的时刻：

明明在 App.vue 里写好了 Toast 组件，却怎么也弹不出来，调了半天发现根本没渲染？！

是的，uni-app 作为跨端框架虽强，但也有一个致命痛点：它没有真正的“根组件”概念。这直接导致很多 Vue 开发者转 uni-app 时踩坑无数。

🧨 痛点：uni-app 缺失根组件，处处“手动劳动”

在 Vue3 项目中，我们可以毫不费力地将全局组件（如 Toast、Loading、LoginModal）写进 App.vue，并在任意页面中直接使用。但到了 uni-app 中，却出现了这些问题：

• ❌ App.vue 不支持 <template> 块
• ❌ 全局组件无法直接挂载，只能每个页面都引入一次
• ❌ 全局状态共享变得困难重重

“这不是我 Vue 写得不行，是 uni-app 限制了我施展的空间啊！”

🛠 解决方案：@uni-ku/root 插件来救场！

幸运的是，社区中已经有大佬站出来解决了这个痛点 —— @uni-ku/root。

它是一个 Vite 插件，通过“虚拟”出一个根组件，让 uni-app 也能像 Vue 一样拥有真正的 App.vue！

✅ 核心特性：

• 支持标准 Vue SFC（单文件组件）
• 支持热更新
• 自动兼容小程序 PageMeta
• 支持 CLI 和 HBuilderX 双模式

🧩 三步集成：像写 Vue 一样优雅

Step 1：安装插件

pnpm add -D @uni-ku/root@latest

Step 2：配置 Vite 插件

// vite.config.ts
import { defineConfig } from 'vite'
import UniKuRoot from '@uni-ku/root'

export default defineConfig({
  plugins: [UniKuRoot()] // 注意放在最前面
})

Step 3：创建 App.ku.vue 根组件

<!-- src/App.ku.vue -->
<script setup lang="ts">
import GlobalToast from '@/components/GlobalToast.vue'
</script>

<template>
  <KuRootView />       <!-- 相当于 RouterView -->
  <GlobalToast />      <!-- 任何你想全局挂载的组件 -->
</template>

✨ 实战示例：全局 Toast 弹窗

1️⃣ Toast 组件代码

<!-- src/components/GlobalToast.vue -->
<script setup lang="ts">
import { useToast } from '@/composables/useToast'
const { globalToastState, hideToast } = useToast()
</script>

<template>
  <div v-if="globalToastState" class="toast-wrapper" @click="hideToast">
    <div class="toast-box">Hello @uni-ku/root!</div>
  </div>
</template>

2️⃣ 组合式 API：useToast

// src/composables/useToast.ts
import { ref } from 'vue'

const globalToastState = ref(false)

export function useToast() {
  return {
    globalToastState,
    showToast: () => (globalToastState.value = true),
    hideToast: () => (globalToastState.value = false),
  }
}

3️⃣ 页面调用 Toast

<script setup lang="ts">
import { useToast } from '@/composables/useToast'
const { showToast } = useToast()
</script>

<template>
  <button @click="showToast">弹出 Toast</button>
</template>

🎨 更多玩法：你的全局组件终于可以这么放

🔍 和 @uni-helper/vite-plugin-uni-layouts 有什么不同？