Specific steps to use vant framework in WeChat applet

1. Speaking of the vant framework, I believe everyone should be familiar with it. Friends who have done mobile terminal development should all know it.

2. Vant is an open source mobile component library developed by Youzan’s front-end team . It was open sourced in 2017 and has been maintained for 4 years. Vant carries all of Youzan's core businesses internally and serves more than 100,000 developers externally. It is one of the mainstream mobile component libraries in the industry.

3. Let’s not waste any more time and get straight to today’s topic. How do we use the vant component library in WeChat applet?

first

Let's open the vant weapp website first. Here I will give you the website address. Vant Weapp website

After you open the website, click on Get Started Quickly. The above steps teach you how to use the vant component library in the mini program.

Next, I will introduce to you how I install and use the vant UI component library.

1. Open the project directory of our applet, and then open the location of the file.

2. Initialize project files

Here I initialize through the cmd window

3. Enter the command to initialize the project

 npm init

At this point you will find that there is an additional package.json file in your directory

4. Install dependencies

4.1 Install vant/weapp via npm

 npm i @vant/weapp -S --production

4.2 Installing the miniprogram

 npm i miniprogram-sm-crypto --production

After the installation is complete, you will find some more files in your directory.

4.3 Modify app.json

Remove "style": "v2" in app.json because the new version of the basic components of the mini program forcibly adds many styles, which are difficult to cover. If it is not closed, it will cause confusion in the styles of some components.

4.4 Modify project.config.json

For projects created by developer tools, miniprogramRoot defaults to miniprogram , and package.json is outside of it, so npm build does not work properly. You need to manually add the following configuration to project.config.json so that the developer tools can correctly index the location of npm dependencies.

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

 4.5 Build npm We click the toolbar in the upper left corner

After the build is successful, the following screen will appear

4.6 Then click Details in the upper right corner---Local Settings---Use npm module

5. Use components

I register a button globally and then use it. First register in app.json

Here I will randomly find a page to use this button component.

You can see that I used it successfully.

This concludes this article on the specific steps of using the vant framework in WeChat mini programs. For more content on using the vant framework in mini programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!