rnti
uni-app——uni-ui的使⽤
uni-app——uni-ui的使⽤
0.2882019.06.09 22:53:34字数 186阅读 2602
1）uni-ui 是全端兼容的基于flex布局的ui库；
2）可以使⽤ npm 的安装使⽤⽅式，也可下载相关组件直接使⽤；
3）uni-ui 不⽀持使⽤ Vue.u() 的⽅式安装
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'
ncisexport default {
components: {
uniCard,
uniPagination
},
data() {
return {
title: '快陪练',
extra: '教育科技公司',
note: '拓展钢琴陪练业务',
feverishthumbnail: 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-paginationlantis
show-icon=fal
total=100
skip是什么意思pageSize=10
current=2
prev-text="上⼀页"
next-text="下⼀页"
></uni-pagination>bonfire heart
</view>
</template>
4. 根据需要下载使⽤lenk
ballantineimport uniCard from "../../uni-ui/uni-card/uni-card.vue"dhole
6年级数学辅导import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"
5. 组件使⽤效果
