微信小程序——使用Vant Weapp 框架

vant在微信小程序中使用是vant weapp,安装使用的方法有两种，通过npm安装，也可以直接引入dist文件

一，通过 npm 安装

步骤一 通过 npm 安装

需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下

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

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

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

步骤二 构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

 步骤三 修改 tsconfig.json

如果你使用 typescript 开发小程序，需要在 tsconfig.json 中增加如下配置，防止 npm 构建后 tsc 编译报错

请将path/to/node_modules/@vant/weapp修改为项目中 @vant/weapp 所在的目录

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
    }
  }
}

步骤四 修改 app.json

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

引入组件 

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

使用组件

引入组件后，可以在 wxml 中直接使用组件

<van-button type="primary">按钮</van-button>

 二，通过文件引入

到GitHub下载 vant Weapp 的代码，将 dist 目录拷贝到自己的项目中。

下面的vant为下载的dist文件

然后按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

1. 添加需要的组件。

在页面的 json 中配置（路径根据自己项目位置配置）：

// index.json
"usingComponents": {
  "van-button":"../../components/vant/button/index"
}

2. 在 wxml 中使用组件：

index.wxml

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>