小程序使用Npm引入【VANT】组件全程教学
相信使用VANT的伙伴们肯定多多少少碰到过跟我一样的问题,楼主整理了一下,大概以下两点 第1.找不到依赖包文件夹node_modules 第2.各种文件路径报错(这个很恶心,有人说是开发者工具文件丢失,解决一个又来一个,事后楼主发现并非如此) 好了,废话不多说,跟着我的步骤一步步的走,基本都会成功。PS:可以在已经开发的项目中引入,不需要重新创建项目 第一步:备份项目文件中的package.json文件。打开cmd,使用管理员权限运行,找到项目目录,npm init。这时候会重新生成package文件 第二步:npm i vant-weapp -S --production,安装VANT组件。这时候项目里会多出两个文件夹 miniprogram_npm 和 node_modules。node_modules文件夹在开发者工具里不会显示出来。然后点工具,构建NPM.再点详情,使用NPM模块[图片] 第三步:第三点很关键,由于很多教程以及官方教程都介绍了两种方法来安装VANT,其实这根本就是两个步骤而不是两种方法。也就是说前面我们是进行了第一步。那么第二步就是根据官方的git地址https://github.com/youzan/vant-weapp,来下载该压缩包。下载完成之后,将其中的dist文件夹放到miniprogram_npm文件夹下的vant-weapp文件夹里面,如图:(其它的可以都删掉)[图片] 第四步:在对应页面的json文件中引入,不要按官方的写法。官方是这么写的: { "usingComponents": {"van-button": "/path/to/vant-weapp/dist/button/index"}
} 我们将其改为自己的路径 "usingComponents": { "van-button": "/miniprogram_npm/vant-weapp/dist/button/index" } 然后在wxml里写个按钮试试 [图片] 大功告成