项目开发准备：集成 uview-plus
在开始知识付费小程序的页面开发之前，需要在 uni-app 项目中集成 UI 组件库 uview-plus。uview-plus 是 uview 的 Vue3 版本，提供了丰富的 UI 组件，可以显著提升开发效率。本节详细讲解集成步骤和常见问题解决。
uview-plus 集成方式
方式一：HBuilderX 插件市场（推荐）
- 访问 uview-plus 官方插件市场页面
- 点击"下载插件并导入 HBuilderX"
- 选择目标项目（uni-starter）
- 等待下载，完成后
uni_modules目录下会出现uview-plus
方式二：NPM 安装
npm install uview-plus
bash
安装后需要将 node_modules/uview-plus 目录拷贝到 uni_modules 中，因为 uni-app 的 easycom 机制依赖 uni_modules 目录结构。
完整配置步骤
第一步：main.js 配置
// main.js
import uviewPlus from 'uview-plus'
export function createApp() {
const app = createSSRApp(App)
app.use(uviewPlus)
return { app }
}
javascript
第二步：uni.scss 配置
在项目根目录的 uni.scss 文件末尾添加：
/* uview-plus 基础样式 */
@import 'uview-plus/theme.scss';
scss
第三步：App.vue 配置
在 App.vue 的 <style> 中引入组件样式：
<style lang="scss">
@import 'uview-plus/index.scss';
</style>
vue
第四步：安装依赖库
npm install dayjs clipboard
bash
uview-plus 内部依赖 dayjs（日期处理）和 clipboard（剪贴板操作），需确认 package.json 中已包含这两个依赖。
第五步：easycom 配置
在 pages.json 或单独的 easycom.json 中配置组件自动导入。对于 HBuilderX 4.24+ 版本，配置如下：
{
"easycom": {
"autoscan": true,
"custom": {
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
}
}
}
json
第六步：TypeScript 支持
在 tsconfig.json 或 App.json 中确认 types 包含了 .d.ts、.ts、.tsx、.vue 文件：
{
"include": ["**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.vue"]
}
json
组件前缀说明
uview-plus 的组件有三种前缀写法：
| 前缀 | 示例 | 说明 |
|---|---|---|
u- | <u-button> | 通用写法 |
u-- | <u--form> | 防止与 uni-app 内置组件冲突 |
up- | <up-button> | 官方推荐写法 |
前缀冲突问题
使用 u- 前缀时，部分组件名称可能与 uni-app SDK 内置组件冲突。推荐使用 up- 前缀。但需要注意，uview-plus 的 uni_modules 中实际组件文件名前缀是 u-，所以 easycom 配置需要正确映射。
实际组件文件名前缀：
u--form、u--image、u--input、u--text、u--textarea这几个组件文件名以u--开头- 其余组件以
u-开头
配置调整
如果 easycom 配置使用 up- 前缀但找不到组件，需要调整配置：
{
"custom": {
"^u--(.*)": "uview-plus/components/u--$1/u--$1.vue",
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
}
}
json
关键点：u--form 这类双横杠组件需要单独匹配规则。
验证集成成功
创建测试页面验证组件是否正常渲染：
<template>
<view>
<up-button type="primary" :disabled="true">测试按钮</up-button>
</view>
</template>
vue
在 pages.json 中注册该页面，启动调试，确认按钮正常显示。
集成检查清单
| 检查项 | 状态 |
|---|---|
| main.js 引入并 use | ✓ |
| uni.scss 引入 theme.scss | ✓ |
| App.vue 引入 index.scss | ✓ |
| 安装 dayjs、clipboard | ✓ |
| easycom 配置组件前缀 | ✓ |
| TypeScript 类型支持 | ✓ |
| 测试组件正常渲染 | ✓ |
↑