1）uni-ui 是全端兼容的基于flex布局的ui库；
2）可以使用 npm 的安装使用方式，也可下载相关组件直接使用；
3）uni-ui 不支持使用 Vue.use() 的方式安装
4）uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app 项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要在项目下npm安装 node-sass 和 sass-loader
1. 初始化项目
在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：
npm init -y
2. 安装 uni-ui
npm install @dcloudio/uni-ui
3. 使用 uni-ui
在 script 中引用组件：
<script>
import {uniCard, uniPagination} from '@dcloudio/uni-ui'
// 也可使用此方式引入组件
// import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'
export default {
components: {
uniCard,
uniPagination
},
data() {
return {
title: '快陪练',
extra: '教育科技公司',
note: '拓展钢琴陪练业务',
thumbnail: require('../../static/capitalDetail.png'),
isFull: true
}
}
}
</script>
在 template 中使用组件：
<template>
<view class="homework-ctn">
<uni-card :title='title' :isFull="isFull" :note="note" :thumbnail="thumbnail" :extra="extra"></uni-card>
<uni-pagination
show-icon=false
total=100
pageSize=10
current=2
prev-text="上一页"
next-text="下一页"
></uni-pagination>
</view>
</template>
4. 根据需要下载使用
import uniCard from "../../uni-ui/uni-card/uni-card.vue"
import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"
5. 组件使用效果
uni-app组件使用效果
