uniapp中扩展组件uni ui的使用

首先，无论使用哪种扩展插件，都需要确认已经执行了一下操作：

uni-app 项目，进入项目目录（下面两步必不可少）

npm init -y

npm install @dcloudio/uni-ui

1、例如--日历

<template>
    <view>
        <!-- template中的内容正常在官网复制 -->
        <uni-calendar 
        :insert="true"
        :lunar="true" 
        :start-date="'2019-3-2'"
        :end-date="'2019-5-20'"
        @change="change"
         ></uni-calendar>
    </view>
</template>

<script>
    // 引入方式统一以下面这种,只更换解构部分
    import {uniCalendar} from '@dcloudio/uni-ui'
    export default {
        // 引入后进行组件注册,即可使用
        components: {
            uniCalendar 
        },
        data() {
            return {};
        },
        methods: {
            change(e) {
                console.log(e);
            }
        }
    };
</script>

<style lang="scss">

</style>

2、例如--滚动通知栏

<template>
    <view>
        <h2>index页面</h2>
        <!-- 写入标签模板 -->
        <uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
    </view>
</template>

<script>
    // 引入对应扩展插件
    import {uniNoticeBar} from '@dcloudio/uni-ui'
    export default {
        data() {
            return {

            }
        },
        onLoad() {

        },
        methods: {
            
        },
        // 注册插件
        components: {
            uniNoticeBar
        }
    }
</script>

<style>

</style>