微信小程序项目使用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安装就配置完成啦。

在这里插入图片描述

发布了28 篇原创文章 · 获赞 13 · 访问量 6980
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览