入门介绍

了解 Root 是什么以及它能为您做什么

什么是 Root?

Root 是一个专为 Uniapp 生态设计的创新工具,它通过 Vite 模拟出虚拟根组件(支持 SFC 的 App.vue),有效解决了 Uniapp 无法使用公共组件的问题。这个工具为 Uniapp 开发者提供了更灵活的组件管理和共享能力,让您的应用架构更加清晰和可维护。

核心特性

虚拟根组件

通过 Vite 模拟虚拟根组件,支持 SFC 的 App.vue,解决 Uniapp 无法使用公共组件的核心问题。

高度可配置

支持自定义虚拟根组件文件命名,提供更灵活的配置选项,满足不同项目需求。

组件实例访问

提供多种方式获取虚拟根组件实例,支持局部和全局启用,方便在页面中调用根组件的方法和数据。

页面过滤

支持通过 excludePages 选项过滤不需要根组件的页面,使用 glob 模式进行灵活配置。

适用场景

Root 适用于多种 Uniapp 开发场景,包括但不限于:

  • 全局共享组件:如 Toast、Message、LoginPopup 等全局弹窗组件
  • 全局布局管理:如 ConfigProvider、Layout、NavBar、TabBar 等布局组件
  • 主题系统:实现全局主题切换和样式管理
  • 状态管理:在根组件中管理全局状态,供所有页面共享
  • 第三方组件库集成:更好地集成和使用第三方 Uniapp 组件库
  • 多端适配:在不同平台(H5、小程序、App)中统一管理组件行为

为什么选择 Root?

与其他 Uniapp 组件管理方案相比,Root 提供了以下优势:

  1. 原生支持:基于 Vite 插件实现,与 Uniapp 原生开发流程无缝集成
  2. 零侵入性:不需要修改现有代码结构,只需简单配置即可启用
  3. 高度灵活:支持自定义根组件名称和配置,适应不同项目需求
  4. 性能优化:自动提取 PageMeta 到页面顶层,优化小程序性能
  5. 开发体验:提供类似 Vue Router 的开发体验,降低学习成本
  6. 生态兼容:与主流 Uniapp 组件库(如 Wot Design Uni)完美兼容

工作流程概述

使用 Root 的典型工作流程包括:

  1. 安装依赖:通过 npm、yarn 或 pnpm 安装 @uni-ku/root
  2. 配置 Vite:在 vite.config.js/ts 中配置 UniKuRoot 插件
  3. 创建根组件:创建 App.ku.vue(或自定义名称)作为虚拟根组件
  4. 添加视图标签:在根组件中使用 <KuRootView /> 指定视图位置
  5. 开发组件:在根组件中开发全局共享组件和逻辑
  6. 页面调用:在页面中通过 ref 或全局方法调用根组件功能

与其他工具的集成

Root 设计为与 Uniapp 生态工具无缝集成:

  • 构建工具:与 Vite 深度集成,支持 HBuilderX 和 CLI 创建的项目
  • 组件库:与 Wot Design Uni 等 Uniapp 组件库完美兼容
  • 状态管理:可与 Pinia、Vuex 等状态管理工具配合使用
  • UI 框架:支持各种 Uniapp UI 框架和组件库
  • 开发工具:兼容 HBuilderX 和 VS Code 等主流开发工具

下一步

准备好开始使用 Root 了吗?请继续阅读 安装指南 了解如何在您的 Uniapp 项目中安装 Root。

社区和支持

Root 拥有一个活跃的开发者社区,您可以:

我们期待看到您使用 Root 构建出色的 Uniapp 应用!