美文网首页
使用npm引用第三方组件库

使用npm引用第三方组件库

作者: 渺渺兮余木 | 来源:发表于2019-07-06 16:19 被阅读0次

    npm安装教程只需跟着步骤操作就行

    1、首先在小程序文件夹miniprogram上,右击,选择在终端打开。

    图片.png

    2、输入npm init进行初始化

    图片.png

    3、之间回车,默认处理,最后选择yes

    图片.png

    4、然后在miniprogram文件夹下会自动生成一个package.json文件

    图片.png

    5、通过官方网站获取组件库(以Vant Weapp为例)

    Vant Weapp官网
    将命令
    npm i vant-weapp -S --production
    复制到终端,执行,执行完成

    图片.png
    图片.png
    图片.png

    6、在WeChat中,点击工具->构建npm,会在miniprogram文件夹下生成miniprogram_npm这个包,其中为Vant组件库;再点击详情->使用npm模块

    图片.png

    7、例:在pages/index页面中使用Vant组件

    图片.png

    在pages/index/index.json中引入Vant中 button组件

    图片.png
    图片.png

    在index.wxml中使用button组件

    "../../miniprogram/miniprogram_npm/vant-weapp/button"
    
    图片.png
    图片.png

    相关文章

      网友评论

          本文标题:使用npm引用第三方组件库

          本文链接:https://www.haomeiwen.com/subject/viwhfctx.html