小程序引入vant框架

首先新建一个小程序项目

在终端打开输入：npm init 一路回车

 这里是vant官网连接：Vant Weapp - 轻量、可靠的小程序 UI 组件库
初始化包配置文件后下载依赖包：在终端输入 

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

通过 yarn 安装 yarn add @vant/weapp --production #

安装 0.x 版本 npm i vant-weapp -S --production

这时候就会多出一个node_module

 

 修改 app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
 

修改 project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

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

 找到开发者工具左上角的工具按钮点击构建npm

 =

  完成构建

在app.json 全局注册组件

//app.json
"usingComponents": {
    "van-button": "@vant/weapp/button/index"
  },

然后在对应的页面引入van-button