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

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

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

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

npm安装需要安装node,在百度上搜索node.js即可:
搜索node.js中文网
点击进入下载
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第1张图片
进入点击windows安装包或者点击64位进行下载
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第2张图片

微信小程序组件库之一 Vant weapp安装与使用以及node安装_第3张图片
用npm -v或者node -v(注意-v前面有空格)
如果出现版本号说明安装成功,反之没安装成功
node安装成功之后npm自动安装成功

2.进行安装vant weapp组件
1.根据官方提供的直接输入
(# 通过 npm 安装:npm i @vant/weapp -S --production)是有问题的,会导致无法正常安装。
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第4张图片
所以应该因为在我们的项目中是没有图中文件的
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第5张图片
所以我们首先应该安装一下这个包(如图)
2.单击右键在终端打开
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第6张图片
3.输入命令npm init -y初始化一下(-y的意思是一路回车)
显示如下说明安装成功
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第7张图片
此时在你的微信小程序中就会出现文件
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第8张图片
4.此时你就可以直接复制官方给的那一行命令
npm i @vant/weapp -S --production安装vant weapp组件,出现如下命令说明安装成功
https://youzan.github.io/vant-weapp/#/quickstart
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第9张图片
5.接下来需要在小程序页面点击详情,本地设置勾选使用npm模块
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第10张图片
6.在工具中有一个构建npm点击
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第11张图片
构建完成点击确定即可
微信小程序组件库之一 Vant weapp安装与使用以及node安装_第12张图片
出现文件说明构建完大功告成微信小程序组件库之一 Vant weapp安装与使用以及node安装_第13张图片
累累的
下一章我们接介绍如何使用vant weapp组件库。

你可能感兴趣的:(微信小程序,小程序)