怎样用uniapp开源组件

发布时间：2026-09-08 20:12:03 来源：亿速云阅读：89 作者：小樊栏目：软件技术

在 uni-app 中使用开源组件，一般有两种常见方式：

一、使用 uni-app 官方组件 / uni-ui（推荐）

1️⃣ 安装 uni-ui（官方开源组件库）

npm install @dcloudio/uni-ui

或在 HBuilderX 中：

右键项目 → 安装依赖 → 选择 uni-ui

2️⃣ 在页面中引入组件

<template>
  <view>
    <uni-badge text="9" type="error"></uni-badge>
  </view>
</template>

<script>
import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'

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

3️⃣ 全局注册（可选）

在 main.js：

import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'
Vue.component('uni-badge', uniBadge)

二、使用第三方开源组件（GitHub / Gitee）

1️⃣ 下载组件

例如：

uView UI
ThorUI
ColorUI

以 uView 为例：

npm install uview-ui

2️⃣ 配置

main.js

import uView from 'uview-ui'
Vue.use(uView)

uni.scss

@import 'uview-ui/theme.scss';

App.vue

@import 'uview-ui/index.scss';

3️⃣ 使用

<u-button type="primary">按钮</u-button>

三、直接使用单文件组件（最简单）

从开源项目复制 .vue 文件
放到 components 目录
页面中引入：

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

四、常见开源组件推荐

✅ uni-ui（官方）
✅ uView UI（功能最全）
✅ ThorUI
✅ ColorUI（样式型）

如果你有具体组件名或使用场景（如表单、图表、地图），我可以给你更具体的示例。

向AI问一下细节