微信小程序 npm构建+vant-weaap安装

微信小程序：工具-npm构建

报错

解决：

1、新建miniprogram文件后，直接进入到miniprogram目录，再次执行下面两个命令，然后再构建npm成功

npm init -y
npm install express（Node js后端Express开发，不使用可以不安装）
npm install

Express框架是Node.js基金会的一个项目，官方网址为http://expressjs.com。（中文网站为
http://expressjs.com/zh-cn)。它提供了对Node.js原生API比较好的封装，从而使开发者更容易的使用Node.js，并用来开发强壮的Web、移动应用，以及API的一些其他功能。开发人员还能够方便的为它开发插件和扩展，从而增加Express的能力。
（Node js后端Express开发，不使用可以不安装）

2、在project.config.json文件找到‘setting’并添加如下配置
在根目录创建一个miniprogram文件夹
将pages、utils、app、sitemap.json等和源代码相关的文件移到miniprogram文件夹下。

 "packNpmManually": true,//默认是false，要改成true
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json", //不一定这个位置，看package.json对应位置
        //例如    "packageJsonPath": "./miniprogram/package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ],

再安装：

• 通过 npm 安装
• npm i @vant/weapp -S --production

进行工具–npm 构建
构建成功，给页面引入组件就可以使用
微信小程序官网-自定义组件
index.josn

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

每个人状况不一样：如下

如果报错：构建失败
vant-weapp官网
新版本没有

3、配置完先不要急于去点【构建npm】，而是先点击【重新打开此项目】（防止出现一些奇怪的问题）

4、等待项目重新打开加载完成后，再点击【构建npm】

微信开发工具构建

安装vant-weaap

注意：

配置好项目的路径之后记得重新打开项目再构建,