如何使用第三方ui库vant-weapp
如何使用第三方ui库vant-weapp
1==》创建文件夹demo
2==》 在小程序 中打开 注意 要先在小程序中打开
如果要想在小程序的开发工具中打开某一个 文件夹
要么是空文件夹 要么有一个 project.config.json的配置
2==》 cmd ==> npm init -y 生成包描述文件 package.json
按照官网提示
3==》npm i @vant/weapp -S --production 注意版本
4==》步骤二 构建 npm 包
打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件
5==》引入组件
以 Button 组件为例,只需要在app.json 中添加如下
"usingComponents": {
"van-button": "@vant/weapp/button"
}
6==>在某个页面就可以使用了按钮了
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>
使用第三方库的注意点###
在使用其他组件时,要引入与之对应的组件
注意组件是否正确
"usingComponents": {
"van-cell": "path/to/@vant/weapp/dist/cell/index",
"van-cell-group": "path/to/@vant/weapp/dist/cell-group/index"
}
上面这种 引入要不得
将path/to去除 dist也要去除。
正确应该为
"van-cell": "@vant/weapp/cell/index",
"van-cell-group": "@vant/weapp/cell-group/index"
否则找不到路径 会报错
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。