HBuilderX 使用 uView Plus 教程

本教程只适用于 HBuilderX 创建的 UniApp 项目

1. 安装 uView Plus

1. 打开 HBuilderX → 插件市场

2. 搜索 uView Plus 并安装

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

   /uni_modules/uview-plus
   

至此，组件库就安装好了。

2. 配置 easycom 自动导入

在 pages.json 里增加配置，让 <u-*> 组件可以直接使用：

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

这样 <u-button>、<u-modal> 等组件都能自动识别，不需要手动 import。

3. 引入主题样式变量

uView Plus 的颜色、间距等变量存放在 theme.scss，需要全局引入一次。

在项目根目录的 uni.scss 文件里添加：

@use "@/uni_modules/uview-plus/theme.scss" as *;

这样 $u-primary、$u-content-color 等变量就能在项目中直接使用，避免报错。

4. 使用示例

新建或编辑 pages/index/index.vue：

<template>
  <view class="container">
    <u-button type="primary" text="立即预约" @click="show = true"></u-button>

    <u-modal
      :show="show"
      title="预约提示"
      show-cancel-button
      @confirm="confirm"
      @cancel="show=false"
    >
      <view>确认要预约洗车吗？</view>
    </u-modal>
  </view>
</template>

<script setup>
import { ref } from "vue";

const show = ref(false);
function confirm() {
  uni.showToast({ title: "预约成功", icon: "success" });
  show.value = false;
}
</script>

运行后，就能看到按钮和弹窗效果。

5. 清理缓存并运行

如果遇到编译问题，可以清理一下缓存：

• HBuilderX 菜单 → 工具 → 清理缓存 → 清理编译缓存
• 然后重新运行到小程序模拟器或浏览器

✅ 总结

• 在 HBuilderX 插件市场安装 uView Plus → 自动生成 uni_modules/uview-plus
• 在 pages.json 配置 easycom → 组件可直接使用
• 在 uni.scss 引入 theme.scss → 解决变量报错
• 直接写 <u-*> 组件即可，零配置、零折腾

这样，就能在 HBuilderX 项目里愉快地使用 uView Plus 🚀