微信小程序安装vant组件库过程(利用node.js中的npm)

一.前言

最近学完机器学习,闲着无事学一下小程序,安装vant组件库的前提是要拥有一个node.js(npm在其中),下载完node.js之后,在微信小程序的项目文件中输入命令行安装即可

二.安装过程

1.去官网下载并安装node.js

node.js官网安装地址点击这里

微信小程序安装vant组件库过程(利用node.js中的npm)_第1张图片

 点击Other Downloads

微信小程序安装vant组件库过程(利用node.js中的npm)_第2张图片

 下载windows64位

微信小程序安装vant组件库过程(利用node.js中的npm)_第3张图片

 打开下载之后的安装包

微信小程序安装vant组件库过程(利用node.js中的npm)_第4张图片

注意:这一步之前会有安装路径的选择,默认放C盘或者放别的盘都可以

点击next即可,Add to Path 会自动将其加入环境变量中

微信小程序安装vant组件库过程(利用node.js中的npm)_第5张图片

 啥都不用点,点next就行

微信小程序安装vant组件库过程(利用node.js中的npm)_第6张图片

 最后点击install安装,慢慢等待就行了,之后点击finish安装结束,因为我电脑中有,所以后面就不进行二次安装了

安装成功之后,按win+R输入cmd,进入小黑盒输入node,看是否已经下好了

微信小程序安装vant组件库过程(利用node.js中的npm)_第7张图片

微信小程序安装vant组件库过程(利用node.js中的npm)_第8张图片

2.安装vent

2.1 登录vent官网

vent微信小程序下载点击这里

点击快速上手

微信小程序安装vant组件库过程(利用node.js中的npm)_第9张图片

 在安装里复制通过npm安装那一行

微信小程序安装vant组件库过程(利用node.js中的npm)_第10张图片

2.2 打开微信开发者工具并打开某一个项目

这里我用自己的举例

微信小程序安装vant组件库过程(利用node.js中的npm)_第11张图片

在资源管理器的最下面空白处按鼠标右键,选择在外部终端窗口中打开 

微信小程序安装vant组件库过程(利用node.js中的npm)_第12张图片

 打开黑盒子之后输入 npm init -y,资源管理器会多出来一个一个package.json的包

注意:你所用的微信小程序的项目名称一定得是全英文的,中文会报错

微信小程序安装vant组件库过程(利用node.js中的npm)_第13张图片

微信小程序安装vant组件库过程(利用node.js中的npm)_第14张图片

 看红线部分

微信小程序安装vant组件库过程(利用node.js中的npm)_第15张图片

下面安装vent,还是刚才在外部终端打开的小黑盒,还有一开始去vent官网所复制的那一行命令:

npm i @vant/weapp -S --production

我用的是 npm i @vant/[email protected] -S --production(只是版本不同而已,大家自行选择就可)

微信小程序安装vant组件库过程(利用node.js中的npm)_第16张图片

微信小程序安装vant组件库过程(利用node.js中的npm)_第17张图片

这就已经安装成功了,下面是导入和使用

2.3 vent包的导入和使用

在菜单栏中选择工具,下拉列表中选择构建npm

微信小程序安装vant组件库过程(利用node.js中的npm)_第18张图片

接下来进入vent官网-基础组件-button按钮,找不到的同学我把链接放下面

vent-button组件信息网址

可以看到引入的方法,就是在全局的app,json中引入组件

微信小程序安装vant组件库过程(利用node.js中的npm)_第19张图片

 打开微信开发者工具,复制下面一段到app.json中去即可

"usingComponents": {

        "van-button": "@vant/weapp/button/index"

}

微信小程序安装vant组件库过程(利用node.js中的npm)_第20张图片

 下面在主页面调用一下

微信小程序安装vant组件库过程(利用node.js中的npm)_第21张图片

 从文档可以看到button的type有很多类型,想用哪个调用哪个就可

微信小程序安装vant组件库过程(利用node.js中的npm)_第22张图片

微信小程序安装vent包就到这就结束啦 

你可能感兴趣的:(微信小程序x,微信小程序,node.js,小程序,npm,javascript)