Root

借助 Vite 模拟出虚拟的全局组件，解决 uniapp 无根组件导致无法使用全局共享组件问题

📦 安装

pnpm add -D @uni-ku/root

🚀 使用

引入 @uni-ku/root

// vite.config.*

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

export default defineConfig({
  plugins: [
    // 若存在改变 pages.json 的插件，请将 UniKuRoot 放置其后
    UniKuRoot()
  ]
})

注册全局组件

建议配合 @uni-helper/vite-plugin-uni-components 使用，可以省略以下全局注册组件

// main.*

import LoginModal from '@/components/LoginModal'

export function createApp() {
  const app = createSSRApp(App)

  app.component('LoginModal', LoginModal)

  return {
    app
  }
}

添加全局所需组件或代码

注意：组件或变量都需要在全局中共享，否则无法正常渲染与使用

// App.vue

<template>
  <LoginModal />
</template>

🦾 拓展

该功能与 VueRouter 中的 RouterView 实现类似

通过标签 <KuRoot /> 或 <ku-root /> 实现指定共享组件存放位置

// App.vue

<template>
  <div>当前页面的顶部</div>
  <KuRoot />
  <LoginModal />
</template>

✨ 例子

全局Toast组件核心实现请关注: src/components src/composables

🔗 查看完整例子

📝 待办

热更新
补全单元测试
使 App.vue 与正常 Vue文件一样被使用

💬 社区

QQ 交流群 (897784703)

💖 赞助

如果我的工作帮助到了您，可以请我吃包辣条，能够使我能量满满 ⚡

点这里请吃辣条 👈