WeChat applet configuration Vant Weapp

One: Install the vant component library

        Check whether there is a package.json file in the project. If not, you need to initialize the package management file. The method is as follows:

Use the following command in the terminal:

npm init -y

Two: Install the component library through npm

        After the package management file is successfully initialized, the component library can be installed. Also run the following command in the project terminal:

npm i @vant/weapp -S --production

Three: Modify app.json

        Remove "style": "v2" from the app.json file, and the new version of the applet's basic components will forcibly add many styles, which are difficult to overwrite. If they are not closed, the styles of some components will be confused.

Four: Build npm

        Open the WeChat Developer Tools, click Tools -> Build npm, and check the option to use npm modules. After the build is complete, you can import components.

Five: Use Vant components

Examples are as follows:

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


//在.wxml页面上使用,此处以button举例，具体样式参考Vant官方文档
<vant-button type="primary">按钮</vant-button>

This is ready to use.