微信小程序使用Vant Weapp

To_RUI

已于 2022-11-22 12:04:15 修改

阅读量460

点赞数 1

分类专栏：微信小程序文章标签：微信小程序前端 javascript

于 2022-11-22 12:01:16 首次发布

本文链接：https://blog.csdn.net/m0_60998490/article/details/127980032

版权

微信小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信小程序使用Vant Weapp

1. 检查npm和node

（1）首先，在cmd输入以下内容检查环境。

// 检查版本
npm - v

node -v

// npm更新或者安装没有反应，可以将安装换成国内镜像
npm config set registry http://registry.npm.taobao.org

（2）然后在小程序项目中，删除多余的目录以及文件；page只留一个index，同时记得在app.json删除相应的目录路径，不然会重复出现。
在这里插入图片描述

2. 安装

在该文件点击右键，打开终端，进行初始化，然后安装vant weapp。

在这里插入图片描述

# 1.初始化，得到package.json
npm init -y

# 2.通过 npm 安装，得到node_modules文件夹
npm i @vant/weapp -S --production

# 3.点击工具，点构建npm，出现miniprogram_npm文件夹

3. 使用

在这里插入图片描述

（1）引入，在app.json里面添加相应代码，
在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z9ho7H8O-1669089046712)(C:\Users\86181\AppData\Roaming\Typora\typora-user-images\image-20221120180305137.png)]$

（2）复制组件相关代码，进行使用，代码也可编辑。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OZXgdmNf-1669089046713)(C:\Users\86181\AppData\Roaming\Typora\typora-user-images\image-20221120180327730.png)]$ 在这里插入图片描述