uniapp开源组件怎么安装

在 uni-app 里安装“开源组件”一般有 3 种常见方式，下面按使用频率给你讲清楚，并附示例。

一、通过 uni_modules（最推荐 ✅）

这是 uni-app 官方标准组件管理方式，支持 HBuilderX 一键安装、自动更新。

✅ 方式 1：HBuilderX 插件市场安装（最简单）

1. 打开 uni-app 插件市场
2. 搜索你需要的组件（如：uView、uni-ui）
3. 点击 「使用 HBuilderX 导入」
4. 选择你的 uni-app 项目
5. 安装完成后：
   • 组件会出现在 uni_modules/ 目录
   • 无需手动注册，直接使用

使用示例

<template>
  <uni-badge text="3"></uni-badge>
</template>

✅ 优点

• 官方推荐
• 自动适配 Vue2 / Vue3
• 升级方便

二、通过 npm 安装（适合 Vue / CLI 项目）

如果你的 uni-app 是用 Vue CLI / Vite 创建的，可以用 npm。

1️⃣ 安装组件

npm install @dcloudio/uni-ui

2️⃣ 在 pages.json 注册（部分组件需要）

{
  "easycom": {
    "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
  }
}

3️⃣ 页面直接使用

<uni-card title="标题">内容</uni-card>

✅ 适合：

• CLI 项目
• 熟悉 npm 的开发者

三、手动导入组件（不推荐 ❌）

适合临时测试或老旧项目。

步骤

1. 从 GitHub / 插件市场下载组件
2. 放到项目目录，如：

   components/xxx/
   

3. 在页面中手动注册：

<script>
import xxx from '@/components/xxx.vue'

export default {
  components: {
    xxx
  }
}
</script>

❌ 缺点：

• 升级麻烦
• 不支持自动 tree-shaking

四、常见开源组件推荐

五、常见问题

❓ 安装后组件不生效？

✅ 检查：

• 是否使用 easycom
• 是否放在 uni_modules
• 是否重启 HBuilderX

❓ Vue2 / Vue3 有区别吗？

✅ uni_modules 的组件 自动适配 ✅ npm 组件要看是否支持 Vue3

六、总结（直接照着做）

✅ 90% 情况推荐：

插件市场 → HBuilderX 导入 → 直接用

如果你愿意，可以告诉我：

• 你用的是 HBuilderX 还是 CLI
• 想装 哪个组件

我可以一步一步带你装 ✅