uni-ui 使用说明

自2019年9月11日起 uni-ui 项目重构为 uni-app cli 项目，项目示例可全平台编译查看效果。 点击查看如何运行项目

初始化项目

在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：

npm init -y

安装 uni-ui

npm install @dcloudio/uni-ui

使用 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>

uni-ui 已支持的组件列表

|组件名 |引用路径 |说明 | |--- |--- |--- | |uniBadge |'@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' |数字角标 | |uniCalendar |'@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.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' |宫格 | |uniIcons |'@dcloudio/uni-ui/lib/uni-icons/uni-icons.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' |分页器 | |uniPopup |'@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue' |弹出层 | |uniRate |'@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue' |评分 | |uniSegmentedControl|'@dcloudio/uni-ui/lib/uni-segmented-control/uni-segmented-control.vue' |分段器 | |uniSteps |'@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue' |步骤条 | |uniSwipeAction |'@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue' |滑动操作 | |uniSwipeDot |'@dcloudio/uni-ui/lib/uni-swipe-dot/uni-swipe-dot.vue' |滑动操作 | |uniTag |'@dcloudio/uni-ui/lib/uni-tag/uni-tag.vue' |标签 |

其他

• 本页面介绍使用 npm 的安装使用方式，也可下载相关组件直接使用，组件下载地址见上表
• uni-ui 不支持使用 Vue.use() 的方式安装
• uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app 项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要安装 node-sass 和 sass-loader
• 如将 cli 项目拖入到 HBuilderX 中运行出现 node-sass 报错，只需将 src 目录拖入到 HBuilderX 中运行即可