收藏
评论

小程序使用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里写个按钮试试


大功告成

最后一次编辑于  03-30  (未经腾讯允许,不得转载)
收藏赞 0

3 个评论

  • 沫笺
    沫笺
    02-18

    用npm安装的第三方库会占代码大小吗

    02-18
    赞同 1
    回复
  • 起风了~
    起风了~
    08-28

    请问:

            vant2.1.7版本 的uploader组件如何引入微信小程序,https://youzan.github.io/vant/#/zh-CN/uploader

    因为引入方式和1.0.0版本完全不一样,我在网上找了很久也没找到

    08-28
    赞同
    回复
  • All Falls Down
    All Falls Down
    03-26

    哈哈哈  有用!

    03-26
    赞同
    回复 1
    • The wind is blowing
      The wind is blowing
      03-26

      感谢采纳

      03-26
      回复