收藏
评论

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


大功告成

最后一次编辑于  2019-03-30
收藏

5 个评论

  • 沫笺
    沫笺
    2019-02-18

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

    2019-02-18
    赞同 1
    回复 3
    • The windy is blowing
      The windy is blowing
      2020-07-13
      肯定会啊,但是不大
      2020-07-13
      回复
    • The windy is blowing
      The windy is blowing
      2020-07-13
      打包大时候只会编译你需用到的组件
      2020-07-13
      回复
    • 嘴角上扬十五度
      嘴角上扬十五度
      06-15
      请问为什么我的会出现这种错鸭
      06-15
      回复
  • 陈景夏
    陈景夏
    2020-10-14

    现在好像更新了,cmd => npm init => vant官网提供的npm命令安装 => 构建npm => 详情使用npm模块 => 按vant官网引用就可以了

    2020-10-14
    赞同
    回复 1
    • 小猪佩琪
      小猪佩琪
      03-16
      不行   我今天刚弄得  也可能是我没弄好所以才不行 但是我直接给我的路径引用就没问题了
      03-16
      回复
  • Serendipity
    Serendipity
    2020-09-12

    那请问这么做了以后要怎么打包发布?使用什么命令?

    2020-09-12
    赞同
    回复
  • 执念
    执念
    2019-08-28

    请问:

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

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

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

    哈哈哈  有用!

    2019-03-26
    赞同
    回复 1
登录 后发表内容