小程序中使用vant

vant链接：https://github.com/youzan/vant-weapp

小程序npm: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

1打开终端，初始化项目，生成pack.json文件

2、通过 npm 安装 npm i @vant/weapp -S --production

3、微信开发者工具点击右上角详情--本地设置--勾选使用npm模块

4、构建npm

5、修改 project.config.json

官方解释：官方修改npm包位置

{ 
   ... 
  "setting": { 
    ... 
    "packNpmManually": true,
    "packNpmRelationList": [
       { 
        "packageJsonPath": "./miniprogram/package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
        } 
     ] 
  } 
}

6、重新构建npm一次，

7.使用组件

全局引入（推荐）

在app.json中引入组件， 

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

假如想在index.wxml中使用button组件

index.wxml

<view class="container">   
  <van-button type="default">默认按钮</van-button>   
  <van-button type="primary">主要按钮</van-button>   
  <van-button type="info">信息按钮</van-button>   
  <van-button type="warning">警告按钮</van-button>   
  <van-button type="danger">危险按钮</van-button> 
</view>

注意，组件引用路径问题

全局引用

单页面引用