小程序使用ui组件库

Posted on 2020-05-18 08:53  张雪冬前端学习园地  阅读(467)  评论(0)  编辑  收藏  举报

Vant Weapp UI 使用

 

1.介绍：是一个专门为小程序打造的UI组件库

// 安装组件库

npm i @vant/weapp -S --production

/*

    注意：小程序使用npm安装的包，需要做以下俩步


    1.在微信开发工具中的详情中的本地设置，勾选使用npm模块


    2.在微信开发工具中菜单中的，构建npm才可以使用
*/





// 在页面组件中使用ui组件


// 1.全局注册ui组件，在app.json中注册，usingComponents中注册组件


{

    "usingComponents": {

        "van-tabbar": "@vant/weapp/tabbar/index",

        "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    }
}



// 2.局部注册，也就是在自己的页面组件中注册，在index.json配置，这样就只能在当前页面组件中使用了


{

    "usingComponents": {

        "van-tabbar": "@vant/weapp/tabbar/index",

        "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    }
}