uni-ui 技术文档

1. 安装指南

方式一：使用 uni_modules 安装（推荐）

1. 通过插件市场导入组件库
2. 右键菜单快速更新组件
3. 无需引用和注册，直接在页面中使用 uni-ui 组件

目录结构示例：

┌─components
│  ├─uni-list
│  │  └─uni-list.vue
│  ├─uni-list-item
│  │  └─uni-list-item.vue
│  ├─uni-badge
│  │  └─uni-badge.vue
└─...

方式二：使用 npm 安装

1. 在 vue-cli 项目或 HBuilderX 项目中使用 npm 安装
2. 创建 vue.config.js 文件并配置：

module.exports = {
    transpileDependencies:['@dcloudio/uni-ui']
}

准备 sass：

1. 安装 sass：

npm i sass -D

2. 安装 sass-loader：

npm i sass-loader@10.1.1 -D

安装 uni-ui：

npm i @dcloudio/uni-ui

2. 项目使用说明

组件引用方式

1. 在 script 中引用组件：

import {uniBadge} from '@dcloudio/uni-ui'
export default {
    components: {uniBadge}
}

2. 在 template 中使用组件：

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success"></uni-badge>

easycom 配置

在 pages.json 中添加：

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

3. 项目 API 使用文档

通用组件特性

1. 高性能：自动差量更新数据，优化逻辑层和视图层通讯
2. 全端兼容：多端自适应，自动处理平台差异
3. 主题扩展：支持 uni.scss 切换 App 风格
4. 自动统计：与 uni 统计自动集成实现免打点

组件列表

uni-ui 提供丰富的组件，包括但不限于：

• uni-badge：数字角标
• uni-calendar：日历
• uni-card：卡片
• uni-collapse：折叠面板
• uni-countdown：倒计时
• uni-datetime-picker：日期选择器
• uni-popup：弹出层
• uni-swipe-action：滑动操作
• uni-table：表格

4. 项目安装方式总结

推荐安装方式

1. uni_modules 方式：最简单直接，支持自动更新
2. npm + easycom：适合需要灵活配置的项目

注意事项

1. CLI 项目需要配置 vue.config.js
2. H5 端不支持在 main.js 中全局注册组件
3. 不支持使用 Vue.use() 的方式安装
4. 注意 sass-loader 版本需低于 11.0.0

开发建议

1. 优先使用性能更高的基础组件
2. 按需引入必要的扩展组件
3. 遇到问题可提交 Issues
4. 欢迎贡献代码和主题风格