Write first: Why write this article?

Today I installed Vant in the small program, according to the steps of the official website, did not install 😤. There is something wrong with the installation steps on the official website. After searching information online and thinking and practice, I have come up with the simple and correct steps I think. In order to record and share my experience of stepping pits.

Setp1: initialization

Start by creating a new applet directory and executing the following command in that directory to quickly initialize package.json

#Quickly initialize a package.json
npm init -y
Copy the code

Vant setp2: installation

Install Vant with the following command

#Install via NPM
npm i @vant/weapp -S --production

#Installing on YARN
yarn add @vant/weapp --production
Copy the code

Setp3: construction of NPM

In details > Local Settings, select use NPM module

Then, intoolTAB, clickBuild the NPM

The following figure shows the successful build

After the build is complete, you can see that the project has an additional name namedminiprogram_npmDirectory, which is builtVant

The miniprogram_npm directory structure is as follows

. ├ ─ ─ miniprogram_npm │ └ ─ ─ @ vant │ └ ─ ─ weapp │ ├ ─ ─ XXXX - XXXX │ │ ├ ─ ─ XXXX. Js │ │ ├ ─ ─ XXXX. Json │ │ ├ ─ ─ XXXX. WXML │ │ └ ─ ─ XXXX. WXSSCopy the code

Setp4: Modify the configuration file

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.

Setp5: Indicates whether the test takes effect

Try registering a few global components in app.json

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

Use in pages

<van-button type="default">The default button</van-button>
<van-button type="primary">The main button</van-button>
<van-button type="info">Information button</van-button>
<van-button type="warning">The warning button</van-button>
<van-button type="danger">Dangerous button</van-button>
<van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">Gradient button</van-button>
<van-rate value="3" icon="like" void-icon="like-o" />
Copy the code

The effect is as follows:

OK👌, done.