uni-app如何使用vant-ui

朴灿烈づ我的快乐病毒、 2023-03-02 10:09 18阅读 0赞

## Vant官网https://youzan.github.io/vant/\#/zh-CN/ ##

点击官网右上角跳转到小程序版vant(方便查看文档)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70]

1.在根目录下创建一个文件夹 格式如下wxcomponents>vant>dist  
![在这里插入图片描述][2020072816122622.png]

2.前往https://github.com/youzan/vant-weapp下载压缩文件  
将该项目的dist文件夹替换步骤1的dist文件夹![在这里插入图片描述][20200728161520844.png]  
3.App.vue的style中引入样式  
@import “/wxcomponents/vant/dist/common/index.wxss”;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70 1]  
4.使用:在pages.json中引入相应的组件 下面以要使用button组为例  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70 2]  
“usingComponents”: \{  
“van-button”: “/wxcomponents/vant/dist/button/index”  
\}

页面中:  
![在这里插入图片描述][20200728163255625.png]

## 完成   5.使用其他组件可参考官网   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70 3] ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70]: /images/20230208/f717a1a90f9c4d8c82d64db4c147f708.png
[2020072816122622.png]: /images/20230208/e84f8b4be5714c7c88a4952dbe7f0c22.png
[20200728161520844.png]: /images/20230208/faf0853817ad4cf4952812c6bd2be908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70 1]: /images/20230208/e8190b8e84b64dcc8989285c4a942f73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70 2]: /images/20230208/da7c0714a79541da80510007d82912c5.png
[20200728163255625.png]: /images/20230208/8342e124ea094d6680a7f3c197e0ddad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk0MzI2OA_size_16_color_FFFFFF_t_70 3]: /images/20230208/c6f8cafd2e7e4613a8d9a598a47adc16.png