1）uni-ui 是全端兼容的基于flex布局的ui庫；
2）可以使用 npm 的安裝使用方式，也可下載相關(guān)組件直接使用；
3）uni-ui 不支持使用 Vue.use() 的方式安裝
4）uni-ui 依賴 scss，若是 HBuilderX 中創(chuàng)建的 uni-app 項(xiàng)目，需要在 HBuilderX 中安裝 scss 插件；如果是使用 cli 創(chuàng)建的 uni-app 項(xiàng)目，需要在項(xiàng)目下npm安裝 node-sass 和 sass-loader
1. 初始化項(xiàng)目
在 HBuilderX 中新建 uni-app 項(xiàng)目，進(jìn)入項(xiàng)目目錄，執(zhí)行：
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: '拓展鋼琴陪練業(yè)務(wù)',
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. 根據(jù)需要下載使用
import uniCard from "../../uni-ui/uni-card/uni-card.vue"
import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"
5. 組件使用效果
uni-app組件使用效果
