小程序引入VantWeapp组件库 构建npm

小程序引入第三方组件库-VantWeapp

vant官网:(https://youzan.github.io/vant-weapp/#/intro)
github地址:(https://github.com/youzan/vant-weapp)

引入步骤：
1.在小程序文件根目录下新建miniprogram文件根目录初始化 npm init 生成package.josn
2.在执行 npm i vant-weapp -S --production会生成node_modules目录里面有安装的组件
3.回到微信开发者工具：点击工具-构建npm，然后会生成一个miniprogram_npm

image.png

4.此时就以构建成功（开发者工具升级到最新版，在详情里面勾选使用npm模块）

image.png

使用:（以button为例）
1.在app.json或当前.josn文件中引入组件，建议常用组件在app.json中引用，可全局使用

//注意引用路径要以自己项目路径来定
//注意引用路径要以自己项目路径来定
//注意引用路径要以自己项目路径来定
"usingComponents": {
    "van-button": "../miniprogram_npm/vant-weapp/button"
 }

2.在wxml中使用

默认按钮
主要按钮
信息按钮
警告按钮
危险按钮

以上就是使用的过程啦！