在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：
npm init -y
npm install @dcloudio/uni-ui
在 script 中引用组件：
import {uniBadge} from '@dcloudio/uni-ui'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
components: {uniBadge}
}在 template 中使用组件：
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>| 组件名 | 引用路径 | 说明 |
|---|---|---|
| uniBadge | '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' | 数字角标 |
| uniCard | '@dcloudio/uni-ui/lib/uni-card/uni-card.vue' | 卡片 |
| uniCollapse | '@dcloudio/uni-ui/lib/uni-collapse/uni-collapse.vue' | 折叠面板 |
| uniCollapseItem | '@dcloudio/uni-ui/lib/uni-collapse-item/uni-collapse-item.vue' | 折叠面板子组件) |
| uniCountdown | '@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue' | 倒计时 |
| uniDrawer | '@dcloudio/uni-ui/lib/uni-drawer/uni-drawer.vue' | 抽屉 |
| uniGrid | '@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue' | 宫格 |
| uniIcon | '@dcloudio/uni-ui/lib/uni-icon/uni-icon.vue' | 图标 |
| uniList | '@dcloudio/uni-ui/lib/uni-list/uni-list.vue' | 列表 |
| uniListItem | '@dcloudio/uni-ui/lib/uni-list-item/uni-list-item.vue' | 列表子组件 |
| uniLoadMore | '@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue' | 加载更多 |
| uniNoticeBar | '@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue' | 通告栏 |
| uniNumberBox | '@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue' | 数字输入框 |
| uniPagination | '@dcloudio/uni-ui/lib/uni-pagination/uni-pagination.vue' | 分页器 |
| uniRate | '@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue' | 评分 |
| uniSteps | '@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue' | 步骤条 |
| uniSwipeAction | '@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue' | 滑动操作 |
| uniTag | '@dcloudio/uni-ui/lib/uni-tag/uni-tag.vue' | 标签 |
- uni-ui 目前支持编译到：H5、App、小程序
- 本页面介绍使用 npm 的安装使用方式，也可下载相关组件直接使用，组件下载地址见上表
- uni-ui 不支持使用 Vue.use() 的方式安装
- uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app 项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要安装 node-sass 和 sass-loader