微信小程序系列——引入第三方组件库vant

简介: 微信小程序系列——引入第三方组件库vant

前言

在引入之前,需要安装nodejs作为运行环境,具体操作网上可以搜得到!

以引入vant为例:


step1 右键miniprogram,选择“在终端打开选项”


step2 初始化npm

输入npm init,下面的选择都用回车即可

在项目中产生package.json文件即为成功

step3 安装vant

使用命令 npm i vant-weapp -S --production

step4 构建npm

点击微信开发者工具中的“工具”,选择“构建npm”选项

结果:

项目中多出来一个文件夹miniprogram_npm:

step5 使用npm模块

点击开发者工具右上角“详情”,勾选使用npm模块:

step6 测试

在json文件中引入button

{
  "usingComponents": {
    "van-button": "vant-weapp/button"
  }
}
2. "usingComp

wxml:

<van-button type="primary">按钮</van-button>

结果


step7 解决问题

测试过程中出现了问题:

重复第4步,构建npm就行了!

OK, GAME OVER

相关文章
|
1月前
|
资源调度 小程序 前端开发
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
|
5月前
|
JSON 小程序 前端开发
小程序动端组件库Vant Weapp的使用
小程序动端组件库Vant Weapp的使用
41 0
|
17天前
|
小程序
【微信小程序6】引入第三方UI的方法(ColorUi)
【微信小程序6】引入第三方UI的方法(ColorUi)
17 0
|
1月前
|
前端开发 NoSQL 数据库
设计 QQ、微信等第三方账号登陆
设计 QQ、微信等第三方账号登陆
17 0
设计 QQ、微信等第三方账号登陆
|
1月前
|
小程序
小程序中使用weui组件库(一)
小程序中使用weui组件库(一)
|
1月前
|
小程序 开发者
小程序中使用weui组件库
小程序中使用weui组件库
|
3月前
|
开发框架 小程序 JavaScript
高颜值微信小程序 UI 组件库!
高颜值微信小程序 UI 组件库!
125 1
|
4月前
|
小程序 开发者
微信小程序使用vant组件所出现的一些问题
微信小程序使用vant组件所出现的一些问题
44 0
|
4月前
|
存储 小程序
微信小程序vant框架自定义tabbar实现跳转
全网并没有找到一篇可自定义图标的tabbar。 又都是复制的。。。 哎,于是我就来首发第一篇
88 0
|
5月前
|
开发框架 小程序 JavaScript
微信小程序常见的UI框架/组件库总结
微信小程序常见的UI框架/组件库总结
292 0

热门文章

最新文章