Wechat applet reports errors using vant web app

If according to 【vant weapp】 Step by step , Maybe you will encounter the mistakes I encountered .

My step hole , I hope I can help you solve the problem .

A wrong ： Build error

When according to vant weapp A quick guide to getting started step by step , here we are Step four structure npm package Encountered the first pit .

This error is actually caused by the configuration in the previous step packNpmRelationList When the path is not accurate .

terms of settlement ：

   "packNpmRelationList": [
      {
    
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./node_modules/"
      }
    ]

In this way Building a successful

Error 2 ：[“usingComponents”][“van-button”] Not found

This is the second pit encountered , This pit is a bit confusing . Obviously In full compliance with official documentation To the , Why? There will be problems ？ Not believing in evil, I created threeorfour small programs again and again , Go through this process again . Without exception , It's all about this .

Baidu for a long time ,google Long time . Read a lot of related articles , I found that there was a Common ground ：

npm Build build build miniprogram_npm

But I looked at my little program carefully , determine There is no such document . Why do others have , I didn't ？？？ Is there something wrong ？？？ Or say Process reversal 了 ？？？

Think of this , Get ready Reference resources Official documents , Then adjust the process properly . Sure enough , succeed .

Here are the steps for my successful installation and use .

My installation process

1. Recreate project

There is no need to repeat the step of creating a project

At this time Directory structure ：

2. initialization npm

If you have installed node and npm.

npm init -y

3. Installing a plug-in

npm i @vant/weapp -S --production

4. Check npm & npm structure

Be careful ：
If there is Use npm Module options , it Check , then structure npm
If There is no need to tangle , direct structure npm

I don't have any here Use npm Module options This option

After building , Note that there is one more folder in the directory structure of the project ：

In this , We have a folder that others have .

5. modify project.config.json

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

6. Import components

If an error is found Error: module "miniprogram_npm/@vant/weapp/common/component.js" is not defined, Take it easy , Just refresh it .

You can Choice in app.json introduce , It can also be in Specify the json file Introduce in

I was in app.json In the introduction ：

"usingComponents": {
    
  "van-button": "@vant/weapp/button/index"
}

7. Use components

  <van-button type="default"> Default button </van-button>
  <van-button type="primary"> Main buttons </van-button>
  <van-button type="info"> Information buttons </van-button>
  <van-button type="warning"> Warning button </van-button>
  <van-button type="danger"> Danger button </van-button>

8. “style”: “v2”

stay vant weapp Official documents give such a sentence :

take app.json Medium "style": "v2" Remove , Applet New basic components A lot of styles have been added , It's hard to cover , Do not close will cause some component style confusion .

So it depends on your personal situation , Do you want to delete this sentence ～