Small program development uses the vant library, step by step detailed explanation, easy to understand for the first time use

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

Here is the address of the vant applet version, click to enter directly to browse the vant

Step 1: After creating the applet, open the root directory to create a new project
insert image description here
Step 2: Run the current project through cmd

Step 3: Initialize the current project

命令：npm init

insert image description here
Initialization completion status:

At this time, two more configuration files will be found in the folder

Step 4: Download the vant package
Enter the command to download in the root directory of the current project.
npm download command: npm i @vant/weapp -S - -production
cnpm download command: cnpm i @vant/weapp -S --production
will generate dependency package node_modules after downloading
insert image description here

Step 5: Install miniprogram
npm download command: npm i miniprogram-sm-crypto --production
cnpm download command: cnpm i miniprogram-sm-crypto --production

Step 6: Modify the configuration (important here, do not omit)

①: Delete the "style": "v2" line of code in app.json (the reason is that the new version of the applet has added many styles to the basic components, which are difficult to overwrite, and if it is not closed, the styles of some components will be confused) ②:
insert image description here
Use For projects created by WeChat developer tools, the miniprogramRoot defaults to miniprogram, and the package.json is outside of it, so the npm build cannot work properly. You need to manually add the following configuration in project.config.json so that the developer tools can correctly index to the location where npm depends


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

Step 7: Build the npm tool
Open the WeChat developer tool, move the mouse to the tool column, find and build Npm and click
insert image description here

Step 8: Use the component
to configure the vant here and it is ok. Here we suggest that you use it under different pages of development The json file can be imported on demand.
For example: I need to use the button button in the index page. I can import the button in the json file and use the style
insert image description here
in index.wxml as follows

Then you can enter the on-demand import and use according to different function APIs.

PS: Remind everyone, after you create a new project, enter the WeChat developer tool, some default versions will use the old version, and an error will be reported, remember to change to the new version for development

Open WeChat Developer Tools - "Details -" Local Configuration - "Debug Basic Library (select)
insert image description here

Small program development uses the vant library, step by step detailed explanation, easy to understand for the first time use

Guess you like