Skip to content

选型建议 (效能与成本)

在 TechUI 的架构设计中,我们遵循严格的 “组件互斥原则”

为了避免依赖冲突与代码冗余,Prime、Admin、Base、Scifi 这四个核心库不能在同一个项目中混合安装。它们之间存在着严密的层级包含关系,您应当根据项目的最高需求层级,选择唯一的一个库作为项目的入口。

TechUI 选型建议图表

包含关系图谱

在做出选择前,请先理解各组件库的能力边界:

  • @techui/base: 基础原子
  • @techui/scifi: 视觉原子
  • @techui/admin: Base + 业务框架(路由/登录/布局)
  • @techui/prime: Base + Scifi + Admin + 旗舰特权

以下是四条选型路径

请根据您项目的最终形态,选择且仅选择以下一条路径:

旗舰全能路径-Prime

“我全都要:既要业务后台的逻辑,又要科幻大屏的视觉。”

@techui/prime 是 TechUI 生态的全集。 它在底层已经集成了 Base 的原子组件、Scifi 的视觉引擎以及 Admin 的管理系统框架。

  • 包含内容Base + Scifi + Admin + Wasm核心
  • 适用场景
    • 混合型系统:一个系统内既有 CRUD 后台管理,又有 3D 可视化大屏。
    • 商业交付:需要极致开发速度,不希望手动拼接各个模块。

业务中台路径-Admin

“我只需要开发企业级后台,不需要那些花哨的科幻特效。”

@techui/admin 是专注于B端业务的解决方案。 它在 Base 的基础上,增加了“工作台”所需的完整框架能力(动态路由、权限校验、登录页、TagView)。

  • 包含内容Base + 业务框架
  • 不包含:Scifi 科幻组件、Wasm 3D 引擎。
  • 适用场景:企业 ERP、CRM、CMS 内容管理系统。
  • 互斥警告:Admin 内部已集成 Base,请勿单独安装 Base。Admin 无法直接使用 Scifi 组件。

纯视觉路径-Scifi

“我只需要画一张静态的科幻大屏,不需要后台逻辑。”

@techui/scifi 是纯粹的SVG 视觉构建库。 它专注于提供具有电影级质感的 FUI (Future UI) 装饰组件与容器。

  • 包含内容Scifi 视觉组件。
  • 适用场景:纯展示型的大屏、活动宣传页、静态数据看板。
  • 注意:此路径通常用于对交互逻辑要求极低的场景。

基础原子路径-Base

“我有自己的框架,我只需要最基础的 UI 控件。”

@techui/base 是最底层的原子组件库。 它类似于 Element Plus 或 Ant Design,仅提供 Input、Button、Select 等基础控件,不包含任何业务逻辑或特殊视觉风格。

  • 包含内容Base 基础组件。
  • 适用场景
  • 您已经有成熟的 Admin 框架(如 vue-element-admin),只想替换 UI 风格。
  • 构建轻量级的工具页面。
  • 二次开发,封装属于您自己的组件库。

决策对比表

特性💎 Prime🏢 Admin🌌 Scifi🧱 Base
角色统帅 (全集)骨架 (业务)皮肤 (视觉)细胞 (基础)
基础组件 (Base)✅ 包含✅ 包含❌ 无✅ 本体
业务框架 (Admin)✅ 包含✅ 本体❌ 无❌ 无
科幻视觉 (Scifi)✅ 包含❌ 无✅ 本体❌ 无
付费情况💰 付费🆓 免费🆓 免费🆓 免费
安装方式npm i @techui/primenpm i @techui/adminnpm i @techui/scifinpm i @techui/base

🚫 常见错误示范

为了保证项目的稳定性,请避免以下错误的组合方式:

  • npm i @techui/prime @techui/admin

    错误原因:Prime 已经包含了 Admin,重复安装会导致路由与状态管理冲突。

  • npm i @techui/admin @techui/base

    错误原因:Admin 已经内置了 Base,重复安装会导致版本冗余。

  • npm i @techui/admin @techui/scifi

    错误原因跨库混用。如果您既需要 Admin 的框架,又需要 Scifi 的视觉,说明您的需求已经升级到了旗舰级,请直接选择 Prime