Uniapp引入组件不显示？

Question

Uniapp引入组件不显示，我在插件市场下载了组件uv-load-more，我是使用下载插件并导入HBuilderX安装的插件，然后在页面使用，不显示，源代码里面也是一个空白的<>

我用的VUE3

我卸载重新安装还是不显示，因为使用HBuilderX导入的插件，所有没有引入组件，直接在页面上使用的

阅读 277

AI BotBETA

组件未正确注册

// 在页面/组件的<script setup>中手动引入（即使插件市场说明无需引入）
import uvLoadMore from '@/components/uv-load-more/uv-load-more.vue'

Vue3兼容性问题

检查插件是否明确支持Vue3（部分uniapp插件仅兼容Vue2）
→ 尝试在插件市场页面查看版本说明
→ 可尝试添加`options: { "vueVersion": "2" }`到manifest.json测试（不推荐长期使用）

基础用法示例

<!-- 必须绑定status状态 -->
<uv-load-more :status="loadingStatus" />

// 页面需要定义状态
const loadingStatus = ref('loadmore') // 可选值：loading/ nomore/ loadmore

控制台报错排查

1. 打开Chrome调试器
2. 检查Console面板是否有组件注册失败的警告
3. 检查Elements面板观察组件DOM是否生成

路径问题验证

// 检查组件实际存放路径
// 正确路径结构应类似：
└─components
   └─uv-load-more
       └─uv-load-more.vue

<!-- 添加测试样式验证组件是否存在 -->
<uv-load-more 
  :status="'loading'" 
  style="border:1px solid red" 
/>

如果出现红色边框但无内容 → 组件已渲染但样式丢失
如果无边框 → 组件未成功注册/路径错误

1 个回答

得票最新

✓ 已被采纳

排查一下这两点：
1.uni_modules文件夹是是否正常导入该插件
2.package.json文件下easycom是否正常配置

撰写回答

推荐问题