微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法

微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法

1，搭建小程序

1.1 项目 - 新建项目 - 如下图所示：

1.2点击图中“新建”即可创建成功小程序项目。

2，安装vant- weapp库

2.0 - 在安装vant- weapp之前我们需要先初始化npm，然后在安装vant- weapp；
2.1 - 使用cmd命令行进入项目根目录，在项目根目录下面初始化npm

2.2 - 在根目录下面执行命令： npm init

• F:\myproject\小程序>npm init
  
  注意：名字根据自己的项目写一个，其他的一路回车即可。

2.3 - 看到下图证明npm 初始化成功

• 注意：此时在小程序根目录下面生成一个配置文件：package.json ,此配置文件就是刚才在命令行里面写的内容。

根据上面的步骤，现在npm 初始化完成啦，现在去安装vant - weapp 库

3安装vant - weapp

3.1 - vant - weapp官网：点击vant - weapp进入官网。看到官网的教程，使用npm安装。

3.2 - 我们选择使用npm方式安装，执行命令：npm i @vant/weapp -S --production；命令上图中有。执行成功如下图：

注意：此时小程序根目录新增了“node_modules”文件夹，还有package-lock.json配置文件。建议在Windows窗口中看，不要在小程序工具里面查看，因为小程序工具的原因有时候会看不到node_modules文件夹。

3.3 - 根据下图配置小程序工具，构造npm，文档中的图。

3.4 - 以下步骤，根据文档操作即可
注意：先执行下图1，然后执行图2


执行完以后再项目根目录会增加：“miniprogram_npm”目录就是vant- weapp的组件。

4，使用vant- weapp组件

4.1 - 使用小程序工具新建目录，然后新建page。工具会自动把4个文件生成。

4.2 - 根据文档提供，我们正常使用vant- weapp

index.json

"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button"
}

index.wxml

<van-button type="primary">按钮</van-button>

保存编译，就会报此错误，查了好久，终于解决了。解决办法如下：

5，解决使用vant- weapp组件报错：

5.1 建议找到Windows目录操作，不建议在小程序工具中操作。把miniprogram_npm@vant\weapp里的文件都删除。

5.2 - 之后再打开vant weapp下载一份vant， 将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）把dist文件夹复制到 miniprogram_npm@vant\weapp下即可。

5.3 - 此时我们需要稍微改动下配置文件的路径，我们在vent weapp官网上面看到的组件配置是这样，下图所示

5.4 - 上图中的路径我们需要在index.json中改成我们自己的路径，代码如下：

注意：根据自己的文件所在位置，去寻找miniprogram_npm文件夹。

index.json

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/@vant/weapp/dist/button"
  }
}

index.html

<van-button type="primary">按钮</van-button>

根据以上操作，vent weapp安装就配置完成啦。