小程序引入Vant报错，没有创建miniprogram_npm目录

目标：小程序中引入vant，并使用vant插件进行开发
旁白：由于刚接触小程序，有许多不懂。想用小程序找些外包搞搞，提高一些技术和经验

小程序引入插件步骤：

1、在命令窗口cd .\miniprogram\ 进入项目的miniprogram目录再执行命令下一步命令

2、执行npm init - y（有报错404就执行npm init），下一步直接默认（回车键就行），Is this OK? (yes) y（输入y回车就行）

3、引入插件，执行npm i @vant/weapp -S --production；生成下面文件夹

4、在project.config.json修改

"packNpmManually": true,

    "packNpmRelationList": [

      {

        "packageJsonPath": "./package.json",

        "miniprogramNpmDistDir": "./"

      }

    ],

5、构建npm

 

 

构建完成

6、引入vant包 

在对应要引入的页面的json中添加某组件，如日历插件 "van-calendar": "@vant/weapp/calendar/index",

{
  "navigationBarTitleText": "test",
  "usingComponents": {
    "van-calendar": "@vant/weapp/calendar/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-button": "@vant/weapp/button/index"
  },
  "navigationBarBackgroundColor": "#E8380D",
  "navigationBarTextStyle": "white"
}
 

7、出现以下错误是目录不对；删除生成的目录和文件，重新执行第1步

 message： 没有找到可以构建的 NPM 包，请确认需要参与构建的 npm 都在 `miniprogramRoot` 目录内，或配置 project.config.json 的 packNpmManually 和 packNpmRelationList 进行构建 [1.05.2203032][win32-x64]

出现这个问题原因 ：

官方参考文档

（1） 微信小程序前端开发踩坑——引入weui组件库 | 微信开放社区

（2）npm 支持 | 微信开放文档

1、根目录就是我上面写的第一步

2、小程序是有默认的目录结构的，可以通过修改project.config.json参数修改默认设置；可以自己去尝试

默认的目录结构如下