uniapp中vant文件的引入及使用

1.下载vant文件包

2.在pages同级目录下创建wxcomponents文件夹,并把vant文件夹放入

        在vant官网找到想要的 查看引入方法,如:

        在app.jsonindex.json中引入组件,详细介绍见快速上手

                "usingComponents": {

                  "van-toast": "@vant/weapp/toast/index"

                }

3.在pages.json文件内找到要引入的页面 ,放进去,如:

        {

            "path" : "pages/login/login",                                                                                   

        "style": {

        "navigationBarTitleText": "登录",

        "enablePullDownRefresh": false,

        "navigationStyle": "custom" ,// 隐藏系统导航栏

        "usingComponents":{

        "van-toast": "../../wxcomponents/vant/dist/toast/index"

        }

        }

        }

4.找到对应页面,引入:(根据实际路径填写)

import Toast from 'path/to/@vant/weapp/dist/toast/toast';

例:

    import Toast from '../../wxcomponents/vant/dist/toast/toast';


注:若提示未找到节点 则文件中写入<van-toast id="van-toast" />

注:还需要在App.vue 中设置:

/*每个页面公共css */

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

上一篇:mpvue中引用Vant-weapp时,没有把原来的px转换成rpx问题解决办法(踩坑记录)


下一篇:vue vant移动端列表刷新