uniapp开源组件怎么配置

在 uni-app 里使用“开源组件”一般有几种常见方式，下面按最常用、最规范的方式给你讲清楚，从配置到使用一步到位。

一、uni-app 组件的基本分类

1️⃣ 内置组件（无需配置）

如：

<view></view>
<text></text>
<image></image>

✅ 直接使用，无需配置

2️⃣ uni-ui 官方开源组件（最推荐）

uni-ui 官方地址

✅ 安装方式一：通过 npm（推荐）

npm install @dcloudio/uni-ui

在 pages.json 中配置 easycom（关键）

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

✅ 配置后无需 import，直接使用

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

3️⃣ uni_modules 方式（DCloud 插件市场组件）

安装步骤

1. 打开 uni-app 插件市场
2. 找到组件 → 点击 “使用 HBuilderX 导入”
3. 自动安装到：

/uni_modules/组件名/

使用

✅ 支持 easycom，无需配置

<组件名></组件名>

4️⃣ 普通自定义组件（自己写 / 第三方开源）

目录结构示例

components/
 └─ my-component/
     ├─ my-component.vue

① 局部引入（推荐）

<script>
import myComponent from '@/components/my-component/my-component.vue'

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

<my-component></my-component>

② 全局注册（main.js）

import myComponent from '@/components/my-component/my-component.vue'

Vue.component('my-component', myComponent)

5️⃣ easycom 自动引入（最省事 ✅）

在 pages.json 中配置：

{
  "easycom": {
    "custom": {
      "^my-(.*)": "@/components/my-$1/my-$1.vue"
    }
  }
}

✅ 使用后无需 import

<my-test></my-test>

二、常见问题排查

❌ 组件不显示 / 报错

✅ 检查：

1. 组件路径是否正确
2. 是否忘记注册
3. easycom 正则是否匹配
4. 是否使用了 非 H5 不支持的组件

❌ vue 组件在 nvue 中无效

✅ 解决：

• 使用 nvue 专用组件
• 或改用 vue 页面

三、推荐配置方案（总结）

四、如果你愿意，我可以帮你：

• ✅ 配置一个 完整 demo
• ✅ 帮你选 适合你项目的组件方案
• ✅ 看你的 pages.json 帮你改

你可以直接贴：

• 你用的是 vue / nvue
• 你用的是 HBuilderX 还是 CLI
• 你想用哪个开源组件

我可以一步步带你配 ✅