如果是按照【vant weapp】 來一步步走的，也許會遇到我遇到的錯誤。

我的踩坑，希望能夠幫你解決問題。

錯誤一：構建錯誤

當按照vant weapp快速上手的指引一步步走，到了步驟四 構建 npm 包遇到了第一個坑。

這個報錯其實是因為上一步配置packNpmRelationList時的路徑不準確的問題。

解決辦法：

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

如此即可構建成功

錯誤二：[“usingComponents”][“van-button”] 未找到

這是遇到的第二個坑，這個坑有點讓人疑惑。明明是完全按照官方文檔來的，為什么會出現問題呢？不信邪的我又前前后后重新創建了三四個小程序，重新走這個過程。無一例外，全部都是這個問題。

百度好久，google好久?？戳撕枚嘞嚓P文章，發現那些文章有一個共同點：

npm 構建生成 miniprogram_npm

但是我仔細看了看我的小程序，確定沒有這個文件。為什么別人有，我卻沒有？？？是不是哪里出問題了？？？或者說流程顛倒了？？？

想到這，準備參考官方文檔，然后適當的調整一下步驟流程。果然，成功了。

下面就是我安裝使用成功的步驟。

我的安裝流程

1. 重新創建項目

在創建項目這一步驟不再進行贅述

創建完成，此時的目錄結構：

2. 初始化npm

前提是你已經安裝了node和npm。

npm init -y

3. 安裝插件

npm i @vant/weapp -S --production

4. 勾選npm & npm構建

注意：
如果有使用npm模塊選項，就進行勾選，然后構建npm
如果沒有也不用糾結，直接構建npm

我這里就沒有使用npm模塊選項這個選項

構建完成后，注意看項目的目錄結構多了一個文件夾：

到了這，我們才有了別人有的文件夾。

5. 修改 project.config.json

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

6. 引入組件

如果發現報錯Error: module "miniprogram_npm/@vant/weapp/common/component.js" is not defined，不要緊張，刷新一下即可。

你可以選擇在app.json引入，也可以在指定組件的json文件里進行引入

我是在app.json里引入：

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

7. 使用組件

  <van-button type="default">默認按鈕</van-button>
  <van-button type="primary">主要按鈕</van-button>
  <van-button type="info">信息按鈕</van-button>
  <van-button type="warning">警告按鈕</van-button>
  <van-button type="danger">危險按鈕</van-button>

8. “style”: “v2”

在 vant weapp官方文檔給了這么一句:

將 app.json 中的 "style": "v2"去除，小程序的新版基礎組件強行加上了許多樣式，難以覆蓋，不關閉將造成部分組件樣式混亂。

所以看個人情況，是否要刪除這一句～