uni-app——uni-ui的使用

Posted 2021-03-24 无影尊者

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"

5. 组件使用效果