uniapp中扩展组件uni ui的使用

首先，不管使用哪一种扩展插件，都须要确认已经执行了一下操做：

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

npm init -y

npm install @dcloudio/uni-ui

一、例如--日历

<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>

二、例如--滚动通知栏

<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>