uni-app引入UI组件库(Vant-weapp)步骤

梦里梦外; 2021-09-13 15:56 1230阅读 0赞

## 1. 创建目录 ##

*  在项目根目录中创建wxcomponents目录
 *  在wxcomponents目录中创建vant目录  
    ![在这里插入图片描述][20200327131438854.png]

## 2.引入vant-weapp组件 ##

*  在vant-weapp的GitHub Releases版块下载最新的zip包：  
    https://github.com/youzan/vant-weapp/releases  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][20200327131729125.png]  
    下载完成效果如下：  
    ![在这里插入图片描述][20200327131944199.png]
 *  将组件中的dist目录拷贝到创建好的vant目录中  
    ![在这里插入图片描述][20200327132309575.png]

## 3. 页面中使用引入的UI组件 ##

*  在App.Vue目录中的style部分引入UI组件库的样式文件：  
    ![在这里插入图片描述][20200327132931526.png]
 *  在pages.json配置文件的style中,注册页面需要的组件

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]

## 4.在页面中使用组件 ##

![在这里插入图片描述][20200327150036120.png]  
![在这里插入图片描述][20200327150049993.png]  
效果图如下:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]  
注：在web浏览器中打开无效果

[20200327131438854.png]: /images/20210913/1d5633c5a90243bd9409d49e8874c984.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/e9b8abb9f05246c7b83cff4dbb13e775.png
[20200327131729125.png]: /images/20210913/7070d7180cbd406bba74d6c368b13de4.png
[20200327131944199.png]: /images/20210913/7e1148b0570640e4811fd9548814207d.png
[20200327132309575.png]: /images/20210913/768a600453a24c42bd43c0e19e0a405b.png
[20200327132931526.png]: /images/20210913/a048bc449f5247989fd76ca4338fb254.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/31c128d92af246898301b428456a51db.png
[20200327150036120.png]: /images/20210913/2da99c2be27642c48dc8293f3aabb133.png
[20200327150049993.png]: /images/20210913/1645a3a607384516bb2362a14819dfc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]: /images/20210913/7b3bc3d96d57424494a8ea20eb13735e.png