uni-app——uni-ui的使用
0.2882019.06.09 22:53:34字数 186阅读 2602
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"