WeChat Mini Program-Use Vant Weapp Framework

vant uses vant weapp in the WeChat applet, there are two ways to install and use, through npm installation, you can also directly import the dist file

One, install through npm

Step one install via npm

Note that  package.json  and  node_modules  must be in the  miniprogram  directory

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

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

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

Step two build npm package

Open the WeChat developer tools, click  Tools -> Build npm , and check the  Use npm module  option. After the build is completed, you can import the component

 Step three modify tsconfig.json

If you use typescript to develop small programs, you need to add the following configuration in tsconfig.json to prevent tsc compilation errors after npm builds

Please path/to/node_modules/@vant/weappmodify it to the directory where @vant/weapp is located in the project

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

Step four modify app.json

After removing the app.json, the  new version of the basic components of the"style": "v2"  applet is forced to add many styles, which are difficult to remove. If you do not close it, it will cause some component style confusion

Introduce components 

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

Use components

After the components are introduced, they can be used directly in wxml

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

 Second, import through files

Go to GitHub to download the vant Weapp code, and dist copy the  directory to your own project.

The following vant is the downloaded dist file

Then use the components as follows. Take Button as an example, and view other components on the corresponding document page:

1. Add the required components.

Configure in the json of the page (the path is configured according to the location of your own project):

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

2. Use components in wxml:

index.wxml

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