使用npm包管理构建微信小程序步骤

本文详细介绍了如何在微信小程序中通过npm引入并使用 vant-weapp UI组件库,包括初始化npm、安装包、构建npm和配置使用方法。通过在组件的json和wxml文件中引入和使用组件,实现小程序的美化和功能增强。
摘要由CSDN通过智能技术生成

微信小程序使用npm包步骤

这里以npm引入小程序官方UI组件库vant-weapp为例

1.在小程序根目录内,初始化npm(官方文档上是没写出这一步,这里做个补充)

npm init

2.在小程序中执行命令安装 npm 包(这里使用了vant-weapp):

npm i @vant/weapp -S --production

 3.在微信开发者工具中的菜单栏:工具 --> 构建 npm (这里记得先安装 npm 包,即步骤2):

4.在微信开发者工具中的菜单栏:工具 --> 项目详情, 勾选“使用 npm 模块”选项:

 

 基本配置就完成了,接下来请注意。。。vant-weapp也为我们提供了修改教程,请看下图:

该图 就在vant-weapp主页左侧菜单栏里面的快速上手,配置完成,开箱即用。。。

使用方式:

1.首先在该组件的xxx.json文件引入要使用的组件,如图所示:

 2.在组件的xxxx.wxml中使用即可,如图所示:

 配置+使用已完成,欢迎小伙伴们指点。。。。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值