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

素颜马尾好姑娘i 2023-05-28 12:57 103阅读 0赞

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

**1. 新建相关目录**

*  根目录下创建 `wxcomponents`
 *  wxcomponents下新建`vant`目录  
    ![在这里插入图片描述][20200326142826748.png]  
    **2. 项目中引入vant-weapp组件**
    
     *  下载最新的zip包 （`https://github.com/youzan/vant-weapp/releases`）下载最新版本
     *  解压下载文件,将`dist`目录拷贝到刚才创建`vant`目录中  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 1]

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

1)在`App.vue`文件中引入UI组件库的 样式文件

> @import “/wxcomponents/vant/dist/common/index.wxss”;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 2]  
2)在`pages.json`中,注册页面需要的组件

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 3]  
3)在`index.vue`中写入相应的组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 4]  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 5]

[20200326142826748.png]: /images/20230528/7715700bd0a8409080bdb19259e76c9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70]: /images/20230528/e3cbe06df28e41b8bfff457793de4188.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 1]: /images/20230528/e3132b829e7346d99774c14e2c4f6235.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 2]: /images/20230528/ecdf5c68b3f84f0db7f3e604f50e4a7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 3]: /images/20230528/1a8235e5283548f38625760a029f8500.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 4]: /images/20230528/5d13e4072ec248399c254534ba0d9ad0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pob3VjaGFuZ3l1ZQ_size_16_color_FFFFFF_t_70 5]: /images/20230528/03cc285605f54a249e8c9ddaa1334186.png