uni-app - uni-ui using

uni-app - uni-ui using

0.2882019.06.09 22:53:34 number of words read 186 2602

1) uni-ui is compatible based on the whole end of the flex ui library layout;
2) can be used to install npm use can also be downloaded directly related components;
. 3) does not support the use of UNI-ui Vue.use () manner installation
4) uni-ui rely scss, if HBuilderX created in uni-app items, you need to install the plug-in HBuilderX scss in; if you are using uni-app items cli created, you need to install npm node-sass and sass- in the project loader

1. Initialize project

In HBuilderX New uni-app items into the project directory, execute:

npm init -y

2. AnSo uni-ui

npm install @dcloudio/uni-ui

3. use uni-ui

In reference to the component in the 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>

Components used in the 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. The need to download

import uniCard from "../../uni-ui/uni-card/uni-card.vue"
import uniPagination from "@/uni-ui/uni-pagination/uni-pagination.vue"

The effect of the use of component