HBuilderX 使用 uni-ui 教程

本文介绍如何在 HBuilderX 创建的 uni-app / uni-app x 项目 中安装和使用 uni-ui 组件库。 uni-ui 是 DCloud 官方维护的跨端组件库，100% 适配 Vue3 和 uvue 引擎，支持 H5 / App / 微信小程序等多端。

📌 1. 安装 uni-ui

方式一：通过 HBuilderX 插件市场（推荐 ✅）

1. 打开 HBuilderX → 工具 → 插件安装 → 插件市场
2. 搜索 uni-ui
3. 点击安装

安装完成后，项目目录会出现：

/uni_modules/uni-ui

👉 所有组件文件都存放在 uni_modules/uni-ui 目录下。

方式二：通过 npm 安装（适合熟悉 npm 的开发者）

在项目根目录执行：

npm install @dcloudio/uni-ui

安装完成后，组件会放在 node_modules/@dcloudio/uni-ui 中。 不过在 HBuilderX 里，推荐使用 插件市场安装，更简单。

📌 2. 配置 easycom 自动引入

为了在页面里直接使用 <uni-*> 组件，而不用手动 import，推荐在 pages.json 中添加 easycom 配置：

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

📌 3. 使用示例

在 pages/index/index.vue 中添加一个按钮：

<template>
  <view class="container">
    <uni-button type="primary" @click="handleClick">点击我</uni-button>
  </view>
</template>

<script setup>
function handleClick() {
  uni.showToast({ title: "按钮被点击啦", icon: "success" })
}
</script>

运行后，就能在 微信小程序 / H5 / App 等端看到效果。

📌 4. 常用组件

uni-ui 提供了丰富的跨端组件，例如：

• 表单类：uni-forms、uni-easyinput、uni-data-picker
• 交互类：uni-popup、uni-load-more、uni-datetime-picker
• 导航类：uni-nav-bar、uni-list、uni-segmented-control
• 展示类：uni-card、uni-icons、uni-notice-bar

完整文档可参考：uni-ui 官方文档

📌 5. 总结

• 安装：推荐使用 HBuilderX 插件市场，自动生成 uni_modules/uni-ui
• 配置：在 pages.json 添加 easycom 配置，组件可直接使用
• 使用：页面中写 <uni-*> 标签即可，跨端无缝运行

这样，你就可以在 HBuilderX + uni-app x (Vue3 + uvue) 项目里，快速使用官方的跨端组件库 uni-ui 🚀