微信小程序之引入使用Vant Weapp组件

Vant Weapp官网地址：https://youzan.github.io/vant-weapp/#/quickstart，自己可以去其官网详细了解。

这里主要总结下微信小程序中如何使用该组件。

【1】新建一个微信小程序工程

如下所示：

【2】引入并使用Vant Weapp组件的几种方式

① 第一种-直接引入dist

直接去该地址下载项目，https://github.com/youzan/vant-weapp，把dist文件进入你的小程序工程中。


在 json 文件中配置button组件,修改路径：

{
  "usingComponents": {
   "van-button": "/dist/button/index"
 }
}

然后wxml就可以使用该组件，实例如下：

---

② 第二种方式–npm引入组件

1.小程序工程目录下初始化组件库

 npm init 
 //然后一直回车即可

2.通过npm进行安装

小程序已经支持使用 npm 安装第三方包，注意这个是在你小程序项目的目录下。

# 通过 npm 安装
npm i vant-weapp -S --production

3.微信开发者工具–构建npm

构建完成会多一个miniprogram_npm文件夹

4.详情–本地设置中勾选使用npm模块

5.index.json中引入后即可在index.wxml中使用

修改index.json文件：

{
  "usingComponents": {
    "van-button": "/miniprogram_npm/vant-weapp/button/index"
 }
}

修改index.wxml:

  
     获取头像昵称 
    
      
      {{userInfo.nickName}}
    
  
  
    {{motto}}
  
默认按钮
主要按钮
警告按钮
危险按钮