dabai_web_f/docs/uView使用指南.md

uView-Plus 使用指南

已完成集成步骤

1. ✅ 安装依赖：npm install uview-plus --save
2. ✅ 在 main.js 中引入并注册
3. ✅ 创建 src/uni.scss 并引入 uView 主题变量
4. ✅ 在 vite.config.js 中配置 SCSS 预处理器
5. ✅ 在 pages.json 中配置 easycom 自动引入

配置说明

uni.scss

/* uView-Plus 主题变量配置 */
@import 'uview-plus/theme.scss';

vite.config.js

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "@/uni.scss"; @import "@/styles/variables.scss"; @import "@/styles/mixins.scss";',
      api: 'modern-compiler',
      silenceDeprecations: ['legacy-js-api', 'import']
    }
  }
}

pages.json

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

常用组件示例

1. 按钮 (u-button)

<u-button type="primary" text="主要按钮"></u-button>
<u-button type="success" text="成功按钮"></u-button>
<u-button type="warning" text="警告按钮"></u-button>

2. 加载动画 (u-loading-icon)

<u-loading-icon mode="spinner"></u-loading-icon>
<u-loading-icon mode="circle"></u-loading-icon>

3. 弹窗 (u-popup)

<u-popup v-model:show="show" mode="bottom" :round="10">
  <view class="content">弹窗内容</view>
</u-popup>

4. 输入框 (u-input)

<u-input v-model="value" placeholder="请输入内容"></u-input>

5. 表单 (u-form)

<u-form :model="form" ref="formRef">
  <u-form-item label="姓名" prop="name">
    <u-input v-model="form.name" placeholder="请输入姓名"></u-input>
  </u-form-item>
</u-form>

6. Toast 提示

// 在组件中使用
this.$u.toast('提示内容')

7. 日历 (u-calendar)

<u-calendar v-model:show="show" @confirm="confirm"></u-calendar>

8. 时间选择器 (u-datetime-picker)

<u-datetime-picker 
  v-model:show="show" 
  v-model="currentDate"
  mode="datetime"
  @confirm="confirm"
></u-datetime-picker>

可以优化的现有组件

LoadingOverlay.vue

可以使用 u-loading-icon 替代自定义加载动画：

<template>
  <u-overlay :show="visible">
    <view class="loading-box">
      <u-loading-icon mode="spinner" size="40" color="#ffffff"></u-loading-icon>
    </view>
  </u-overlay>
</template>

BookingPopup.vue

可以使用 u-popup 替代自定义弹窗：

<u-popup 
  v-model:show="visible" 
  mode="bottom" 
  :round="16"
  :closeable="true"
  @close="handleClose"
>
  <!-- 弹窗内容 -->
</u-popup>

可以使用 u-form 和 u-form-item 优化表单：

<u-form :model="formData" ref="formRef" :rules="rules">
  <u-form-item label="姓名" prop="name" required>
    <u-input v-model="formData.name" placeholder="请填写您的姓名"></u-input>
  </u-form-item>
  <u-form-item label="电话" prop="phone" required>
    <u-input v-model="formData.phone" type="number" maxlength="11"></u-input>
  </u-form-item>
</u-form>

可以使用 u-calendar 替代自定义日期选择器

文档链接

• 官方文档：https://uview-plus.jiangruyi.com/
• 组件列表：https://uview-plus.jiangruyi.com/components/intro.html

注意事项

1. uview-plus 是专为 Vue3 + uni-app 设计的组件库
2. 组件通过 easycom 自动引入，无需手动 import
3. 所有组件以 u- 开头
4. 支持主题定制和暗黑模式