uniapp 引用 vant 組件

uniapp 引用 vant 組件

 

1、下載vant組件

vant的GitHub下載地址下載完成后解壓，然后在項目更目錄下創建文件夾wxcomponents，注意這里的wxcomponents目錄級別和pages在同一級別，然后再該目錄下創建vant目錄。回到剛才解壓的vant目錄，找到dist文件夾，把它復制到vant目錄下

 

 2、引入組件

2.1  首先在app.vue文件內添加

@import "/wxcomponents/vant/dist/common/index.wxss";

 

 

 

2.2 在pages.json文件內添加組件引用

 

 你可以選擇在一個頁面的配置文件里面配置，但是只能在這個頁面內使用，你也可以選擇在globalStyle里面配置，是的所有頁面都可以直接使用

"usingComponents":{
    "van-button":"/wxcomponents/vant/dist/button/index",
    "van-notify":"/wxcomponents/vant/dist/notify/index"
}

3、使用組件

3.1   注意notify的使用，她還需要在main.js配置一下，不然就會報$notify is undefined 錯誤。

import Notify from './wxcomponents/vant/dist/notify/notify';

Vue.prototype.$notify = Notify

 

 3.2 最后，在你要使用的頁面內添加你要使用的組件就可以了。

<template>
    <view>
        <van-button @click="aa()" type="info">信息按鈕</van-button>
        <van-notify id="van-notify" />
    </view>
</template>

<script>
    export default {
        data(){
            return{
                
            }
        },
        methods:{
            aa(){
                this.$notify({ type: "danger", message: "通知內容" });
            }
        }
    }
</script>

<style>
</style>

 

 效果：