uniapp开源组件怎么集成

发布时间：2026-10-20 00:14:35 来源：亿速云阅读：90 作者：小樊栏目：软件技术

在 uni-app 中集成“开源组件”通常有以下几种常见方式，按使用频率从高到低给你说明，并附示例。

一、使用 DCloud 插件市场（最推荐）

适合：大多数开源 UI / 功能组件

1. 打开插件市场

官网：https://ext.dcloud.net.cn
搜索你需要的组件（如 uView、uni-ui、mescroll 等）

2. 安装方式

方式一：通过 HBuilderX 安装（最简单）

打开 HBuilderX
右键项目 → 插件市场安装
搜索组件 → 导入
按组件文档配置

方式二：npm 安装（适合熟悉前端）

npm install uview-ui

二、集成 uni-ui（官方组件库）

适合：基础 UI 需求

安装

npm install @dcloudio/uni-ui

使用

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

<script>
import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'
export default {
  components: { uniBadge }
}
</script>

三、使用 uView UI（最流行开源组件库）

安装

npm install uview-ui

配置

main.js

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

uni.scss

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

App.vue

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

四、直接复制开源组件源码

适合：小型组件 / GitHub 项目

从 GitHub 下载组件
放到 components/ 目录
页面中引入

import myComp from '@/components/my-comp/my-comp.vue'

五、常见问题

✅ 组件不显示

检查是否 components 注册
是否配置了 easycom

✅ 样式失效

确认 scss 已安装
App.vue 是否引入样式

✅ 小程序报错

避免使用浏览器专有 API

六、推荐几个常用开源组件

uView UI（全端 UI）
uni-ui（官方）
mescroll-uni（下拉刷新）
uni-simple-router（路由）

如果你有 具体组件名或平台（H5 / 小程序 / App），我可以直接给你一步步集成方案。

向AI问一下细节