微信小程序使用Vant Weapp（最新版）

• 内容已实测，非云开发情况下可正常使用
• Vant Weapp官网：youzan.github.io/vant-weapp/...

一、初始化

1.右键选择资源管理器显示

• 

2.进入终端

• 

3.打开终端

• 

4.初始化命令

npm init

• 目录出现package.json文件，即为引入成功
• 

二、安装依赖

1. 通过 npm 安装vant/weapp

npm i @vant/weapp -S --production

2. 安装 miniprogram

npm i miniprogram-sm-crypto --production

出现下述内容，即为安装成功

• 

3. 修改 app.json

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

4. 修改 project.config.json

• 开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。
• 需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。
• 此处修改注意层级与属性，是在setting对象中，packNpmRelationList中两个属性为数组包裹对象的形式

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

5.构建npm

• 左上角-工具-构建npm

• 构建成功弹出如下

6.使用npm模块

• 注意：最新版的微信开发者工具没有【使用npm模块】选项，可以直接使用
• 如果有【使用npm模块】选项，则勾选，具体图例如下：
• 右上角详情---本地设置----使用npm模块
• 

三、使用组件

• 分为全局注册与按需引入两种，任选其一，各有优劣

1. 注册组件（二选一）

全局注册，在app.json中注册 按需引入，在要使用的当前页面文件的。json文件中注册

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

2.页面首页

注册后任意页面的wxml中直接使用即可

<van-button type="info">信息按钮</van-button>