微信小程序使用Vant Weapp组件库的方法步骤
地址:https://youzan.github.io/vant/#/zh-CN/intro
一.引入Vant组件库
(注:在最外层文件,或者可以直接在项目文件夹 shift+鼠标右键 在此处启动命令窗口或者PowerShell窗口)
1.首先运行 npm init
(注:然后回车就可以了,到最后is this OK?(yes)敲 y 等待就完成了)
完成以后会在目录显示这个文件
二. 安装对应的vant-weapp组件库包
继续输入命令:npm i vant-weapp -S --production 导入vant-weapp包
安装完成后保证当前你的微信开发者工具是最新版本,然后点击执行“构建npm“
构建成功后会提示:
同时项目根目录中会多出一个目录“miniprogram_npm”,这个就是小程序可以识别的npm第三方库。(如果未出现可以等一会,或者关掉微信开发者工具重新启动)
三. 调用vant组件
这时候当我们需要在一个页面中调用vant组件,那么就要在对应的页面json中添加类似如下配置:
(注:一定注意是在"usingComponents"对象中 引入)
这里示例的是一个button组件
{
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index"
}
}
接着你就可以在wxml中直接调用这个ui组件了。
完成这一步,就说明你已经引入成功了
文章参考与:https://blog.csdn.net/weixin_43953710/article/details/90905318?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task