使用vant构建一个微信小程序

1、新建一个空白小程序

按照vant官网执行第一步：

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

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

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

//三选其一

2、初始化：

npm init 

本地设置这两个勾上。

3、然后，小程序开发者工具点击头部“工具”，点击构建NPM。

要是报错：没有可以构建的npm，那么执行一下：

npm i miniprogram-sm-crypto --production

然后再重复一下第三步就可以啦。

4、使用。

确保 小程序目录结构如下：

先去掉app.json里的： "style": "v2" 

然后引入组件：

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}


// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}


// 通过下载源码使用 es5版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/lib/button/index"
}


//三选一，正常步骤是选第一个。

在wxml页面就可以直接用这个标签了。