Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

When you want to introduce Vant into your applet, step 1: open the official documentation, step 2: Cut to Quick Start, and start step 1, step 2, step 3?

You just see

— — — — — — — — — — — — — — — — — — — — — — — — — – the following is a text — — — — — — — — — — — — — — — — — — — — — — — — –

If you are ready to install, you can directly jump to the following “correct installation posture” step by step, there will be no problem!

The problem summary

A summary of some possible problems

Error: Package. json file cannot be found when building NPM

Click on the official website, step 1, install via NPM, this is fine, but when you go to step 4, click “Build NPM”, it will appear

So when installing NPM, make sure package.json exists, or NPM init initializes the project if not. Json file (I don’t have 🤔)

Error 2: Build NPM, miniprogram file not found

After you have the package.json file, click “Build NPM” again

If the miniprogram is not found, create the miniprogram in the root directory to solve the problem.

Problem 3: Build NPM successfully, but there is nothing in miniProgram

Package. json does not contain your dependencies, so the build is empty.

Retry NPM I @vant/ appellate P-s –production

Problem four: Introduction error

I thought I was finally ready to use it, but….. Still error!!

This path error occurs when a component is imported using the quick start method

The official website says

We need to change

"usingComponents": {
	"van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index"
}
Copy the code

All right, there we go.

Correct installation position

Based on the above error analysis, we combined with the official website steps to unlock the correct installation position

Step 1: Create a small program

The current directory file looks like this

Step 2: Execute first

npm init
Copy the code

Generate package.json file, I do the test, straight straight enter, this can be configured according to their own needs

Step 3: Install through NPM (step 1 on the official website)

npm i @vant/weapp -S --production
Copy the code

Step 4: Modify app.json

Json “style”: “v2” removed, the new version of the basic components of the small program forced to add many styles, difficult to cover, do not close will cause some component style disorder.

Step 5: Modify project.config.json

The NPM build does not work properly outside of a project created by developer tools, miniprogramRoot defaults to miniProgram, package.json.

You need to manually add the following configuration to project.config.json so that developer tools can properly index to NPM dependent locations.

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

Note: Due to the structure of the miniprogram_npm directory created by the new version of the developer tool, the file directory built by NPM is miniprogram_npm, and the development tool will create the file name of miniprogram_npm in the current directory by default. So the new version of miniprogramNpmDistDir can be set to ‘./’

Step 6: Add the miniProgram folder to the root directory

Step 7: Build the NPM package

After the build is complete, you will see the vant folder in the miniProgram file, which means the installation is successful and you are ready to use it.

Step 8: Introduce use

Import components in app.json or index.json

"usingComponents": {
  "van-button": "/miniprogram/miniprogram_npm/@vant/weapp/button/index"
}
Copy the code

Then WXML is ready to use

conclusion

If you don’t need it now, save it in case you need it later.

Finally, I’ll teach you a little trick. Look at the picture, and click on the little hand next to the head