uniapp开源组件怎么引入

在 uni-app 中引入开源组件，常见有几种方式，下面按使用频率给你梳理一下：

一、通过 npm 安装开源组件（推荐）

1. 初始化 npm（如果还没做）

npm init -y

2. 安装组件

例如安装 uview-ui：

npm install uview-ui

3. 在项目中引入

（1）在 main.js 中引入

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

（2）在 App.vue 中引入样式

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

（3）在 pages.json 中（如需要）

有些组件需要配置 easycom，例如：

"easycom": {
  "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}

二、使用 uni-app 插件市场（最常用）

1. 打开 https://ext.dcloud.net.cn
2. 搜索需要的组件
3. 点击 「使用 HBuilderX 导入」
4. 组件会自动放入：

/components/组件名

页面中使用

<template>
  <my-component />
</template>

<script>
import myComponent from '@/components/组件名/组件名.vue'

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

三、使用 easycom 自动引入（最省事）

只要组件放在：

/components/组件名/组件名.vue

在 pages.json 中配置：

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

页面中无需 import，直接使用：

<my-button />

四、直接复制源码方式

1. 从 GitHub / Gitee 下载组件
2. 放到 components 目录
3. 按上面方式 import 或 easycom 使用

适合：

• 组件不再维护
• 需要二次修改源码

五、常见注意事项

✅ 小程序端注意：

• 不支持 window / document
• 样式用 rpx

✅ Vue2 / Vue3 区别：

• Vue3 用 setup
• Vue2 用 Vue.use()

✅ 真机调试前先：

npm run dev:%PLATFORM%

如果你有 具体组件名（如 uView、uni-ui、vant） 或 运行平台（小程序 / App / H5），我可以给你更精确的引入步骤。