Vant introduction process
** First initialize a package.json file in the file where the project is located, which is used to store the directory name to be downloaded
Step 1 Install
through npm Install
npm through npm i @vant/weapp -S --production
Step 2: Modify app.json
to remove "style": "v2" from app.json. The new version of the basic components of the applet is forced to add many styles, which are difficult to cover. If you don't close it, it will cause confusion in the styles of some components.
Step 3: Modify the project
created by the project.config.json developer tool, miniprogramRoot defaults to miniprogram, package.json is outside, and npm build cannot work normally.
You need to manually add the following configuration in project.config.json so that the developer tools can correctly index the location that npm depends on.
{
...
"setting": {
...
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
]
}
}
Step 4: Build the npm package
Open the WeChat developer tool, click Tools -> Build npm, and check the Use npm module option. After the build is completed, you can import the component.
