如何使用第三方ui库vant-weapp
2024-09-01 23:28:27
如何使用第三方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"
否则找不到路径 会报错
最新文章
- 用Qt写软件系列五:一个安全防护软件的制作(1)
- ASP.NET MVC读取XML并使用ViewData显示
- 服务器上的json类型的文件提示找不到
- restful架构的理解
- jquery判断文本域长度
- Qt 学习之路:线程和事件循环
- linux usb 驱动详解
- 【LeetCode】118. Pascal&#39;s Triangle
- java排序算法(七):折半插入排序
- Cocos2D旋转炮塔到指定角度(三)
- C++环境设置
- Mui中常见问题记录
- 【HANA系列】SAP HANA XS使用Data Services查询CDS实体【一】
- 【spring基础】AOP概念与动态代理详解
- linux达人养成计划学习笔记(四)—— 压缩命令
- iOS 检测网络状态 自动判断 认为提示网络改变
- TCP-IP详解:Nagle算法
- Spring AOP体系学习总结
- SpringBoot之自定义验证码
- python学习 (二十八) Python的for 循环
热门文章
- linux运维中经常使用的目录和文件讲解
- .net core 微服务通讯组件Orleans的使用与配置
- Python 3 对象关系映射(ORM)
- 页面导入样式时,使用link和@import有什么区别
- python学习-def1
- 《Java基础知识》Java注解";@";详解
- JavaScript动画实例:旋转的圆球
- [ASP.NET Core 3框架揭秘] 依赖注入[3]:依赖注入模式
- CefSharp禁止弹出新窗体,在同一窗口打开链接,或者在新Tab页打开链接,并且支持带type=";POST"; target=";_blank";的链接
- JS获取包含当前节点本身的代码内容(outerHtml)