一.前言
最近学完机器学习,闲着无事学一下小程序,安装vant组件库的前提是要拥有一个node.js(npm在其中),下载完node.js之后,在微信小程序的项目文件中输入命令行安装即可
二.安装过程
1.去官网下载并安装node.js
node.js官网安装地址点击这里
点击Other Downloads
下载windows64位
打开下载之后的安装包
注意:这一步之前会有安装路径的选择,默认放C盘或者放别的盘都可以
点击next即可,Add to Path 会自动将其加入环境变量中
啥都不用点,点next就行
最后点击install安装,慢慢等待就行了,之后点击finish安装结束,因为我电脑中有,所以后面就不进行二次安装了
安装成功之后,按win+R输入cmd,进入小黑盒输入node,看是否已经下好了
2.安装vent
2.1 登录vent官网
vent微信小程序下载点击这里
点击快速上手
在安装里复制通过npm安装那一行
2.2 打开微信开发者工具并打开某一个项目
这里我用自己的举例
在资源管理器的最下面空白处按鼠标右键,选择在外部终端窗口中打开
打开黑盒子之后输入 npm init -y,资源管理器会多出来一个一个package.json的包
注意:你所用的微信小程序的项目名称一定得是全英文的,中文会报错
看红线部分
下面安装vent,还是刚才在外部终端打开的小黑盒,还有一开始去vent官网所复制的那一行命令:
npm i @vant/weapp -S --production
我用的是 npm i @vant/weapp@1.3.3 -S --production(只是版本不同而已,大家自行选择就可)
这就已经安装成功了,下面是导入和使用
2.3 vent包的导入和使用
在菜单栏中选择工具,下拉列表中选择构建npm
接下来进入vent官网-基础组件-button按钮,找不到的同学我把链接放下面
vent-button组件信息网址
可以看到引入的方法,就是在全局的app,json中引入组件
打开微信开发者工具,复制下面一段到app.json中去即可
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
下面在主页面调用一下
从文档可以看到button的type有很多类型,想用哪个调用哪个就可
文章来源:https://www.toymoban.com/news/detail-496000.html
微信小程序安装vent包就到这就结束啦 文章来源地址https://www.toymoban.com/news/detail-496000.html
到了这里,关于微信小程序安装vant组件库过程(利用node.js中的npm)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!