微信小程序集成vant

新建项目

打开微信开发者工具,项目->新建项目,输入目录名称和小程序id

命令行进入到微信小程序的目录

引用流程参考

https://vant-contrib.gitee.io/vant-weapp/#/quickstart

但是按照该页面介绍操作的话，会提示【没有找到可以构建的NPM包，请确认需要参与构建的npm。。。。】

npm init #一路回车

npm i @vant/weapp -S --production

将 app.json 中的 "style": "v2" 去除

project.config.json中的setting模块，设置packNpmManually为true，packNpmRelationList中新增对象{"packageJsonPath": "./package.json", "miniprogramNpmDistDir": "./"}

{

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

  },

启用npm模块,最新版的微信开发者工具并没有这个配置，但是在最新版本中不配置【使用npm模块】也可以正常构建npm

构建npm

工具->构建npm

项目根目录会新增miniprogram_npm目录

app.json中新增vant模块

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

 wxml中使用vant组件

<view class="container">
  <view class="userinfo">
    <van-button type="primary">主要按钮</van-button>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

效果

如果上传到git，然后下载，此时node_moudles目录应该被ignore的，命令行进入git clone下载的目录后需要执行npm install