相信使用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里写个按钮试试
大功告成
就是登录上来来感谢你的,请接受我崇敬的致意,多谢
用npm安装的第三方库会占代码大小吗
谢谢!超级有用!
正好解决了我遇到的问题。
现在好像更新了,cmd => npm init => vant官网提供的npm命令安装 => 构建npm => 详情使用npm模块 => 按vant官网引用就可以了
那请问这么做了以后要怎么打包发布?使用什么命令?
请问:
vant2.1.7版本 的uploader组件如何引入微信小程序,https://youzan.github.io/vant/#/zh-CN/uploader
因为引入方式和1.0.0版本完全不一样,我在网上找了很久也没找到
哈哈哈 有用!
感谢采纳