uni-app 使用 uview-plus

一壶纱2025-12-05 11:25

uview-plus 是一个基于 uni-app 的高质量 UI 组件库，提供了丰富的组件和工具函数，帮助开发者快速构建跨平台应用。

1. 安装 uview-plus

在项目中安装 uview-plus：

bash 复制代码

pnpm add uview-plus

2. 使用 easycom 方式引入组件

在本项目中，uview-plus 是通过 easycom 的方式按需引入组件的。以下是具体使用方法：

2.1 配置组件路径

在 pages.json 中配置 easycom 规则：

json 复制代码

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

说明：

autoscan: 设置为 true，自动扫描 node_modules/uview-plus/components 目录下的组件。
custom: 自定义组件匹配规则，^u-(.*) 和 ^up-(.*) 表示以 u- 或 up- 开头的组件名会匹配到 uview-plus 的对应组件路径。

2.2 使用组件

配置完成后，可以直接在页面中使用 uview-plus 的组件，无需手动引入。例如：

vue 复制代码

<template>
  <view>
    <u-button type="primary">主要按钮</u-button>
    <up-button type="success">成功按钮</up-button>
  </view>
</template>

3. 自定义主题

uview-plus 支持通过 SCSS 变量自定义主题。以下是推荐的自定义主题方案：

3.1 创建自定义主题文件

在项目的 src/styles 目录下新建一个 uview-plus.theme.scss 文件，并将 node_modules/uview-plus/theme.scss 中的所有变量复制到该文件中。例如：

scss 复制代码

$u-primary: #007aff; // 修改主色
$u-success: #4cd964; // 修改成功色
$u-warning: #f0ad4e; // 修改警告色
$u-error: #dd524d; // 修改错误色
// 其他变量...

根据需求修改这些变量的值，以实现自定义主题。

3.2 引入自定义主题文件

在 src/uni.scss 文件的顶部引入自定义主题文件：

scss 复制代码

@import '@/styles/uview-plus.theme.scss';

通过这种方式，uview-plus 的组件将使用自定义的主题变量。