微信小程序组件库之一 Vant weapp安装与使用以及node安装

在微信小程序的开发过程中为了节省时间和方便我们常用组件库去辅助开发,下面我就来介绍一个组件库vant weapp组件库

1.在使用vant weapp组件库时我们首先需要进行安装,官方提供的方法是用npm进行安装,接下来我首先介绍npm的安装:

特别注意(配置环境太麻烦,跟多新手都踩坑,所以路径建议用英文,就不用配置环境了)

npm安装需要安装node,在百度上搜索node.js即可:
搜索node.js中文网
点击进入下载
在这里插入图片描述
进入点击windows安装包或者点击64位进行下载
在这里插入图片描述

在这里插入图片描述
用npm -v或者node -v(注意-v前面有空格)
如果出现版本号说明安装成功,反之没安装成功
node安装成功之后npm自动安装成功

2.进行安装vant weapp组件
1.根据官方提供的直接输入
(# 通过 npm 安装:npm i @vant/weapp -S --production)是有问题的,会导致无法正常安装。
在这里插入图片描述
所以应该因为在我们的项目中是没有图中文件的
在这里插入图片描述
所以我们首先应该安装一下这个包(如图)
2.单击右键在终端打开
在这里插入图片描述
3.输入命令npm init -y初始化一下(-y的意思是一路回车)
显示如下说明安装成功
在这里插入图片描述
此时在你的微信小程序中就会出现文件
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020071919043726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjI5MzIz,size_16,color_FFFFFF,t_70
4.此时你就可以直接复制官方给的那一行命令
npm i @vant/weapp -S --production安装vant weapp组件,出现如下命令说明安装成功
https://youzan.github.io/vant-weapp/#/quickstart
在这里插入图片描述
5.接下来需要在小程序页面点击详情,本地设置勾选使用npm模块
在这里插入图片描述
6.在工具中有一个构建npm点击
在这里插入图片描述
构建完成点击确定即可
在这里插入图片描述
出现文件说明构建完大功告成在这里插入图片描述
累累的
下一章我们接介绍如何使用vant weapp组件库。

猜你喜欢

转载自blog.csdn.net/qq_44629323/article/details/107444672