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>