微信小程序如何使用 npm 下载依赖?详细步骤分享

2024-06-03
来源:网络整理

在前端使用npm进行依赖管理是很常见的,所以熟悉npm的使用是很有必要的,下面介绍一种在微信小程序上使用npm下载依赖的方法(此方法我只测试成功过,有些地方好像不需要下载npm,直接用微信开发工具自带的就行,这个我不太明白怎么用):

1.下载node.js并安装

2、

安装node.js后,打开终端,测试npm

对于Mac,无需配置环境变量,直接使用即可。其他环境请自行查看。

3.在微信开发工具中开启npm支持,步骤如下:

3.在根目录下初始化npm,如下

4.在下环境下执行npm init,使用npm创建.json文件,参考链接如下:

5.切换npm源(因为国内访问太慢):

npm config set registry https://registry.npm.taobao.org

6.使用npm下载依赖库

微信小程序开发使用什么软件_微信开发平台小程序_微信小应用开发

依赖库的地址为:

7. 构建 npm

8. 引入单个组件

"van-count-down": "@vant/weapp/count-down/index"

组件目录(截图里写的组件导入方式和上面不一样,两种都可以,但是上面的更灵活):

到此就导入完成了,下面是简单的使用

在wxml中编写布局文件:

{{ timeData.seconds }}

在js中引用该组件:

使用#号对应wxml文件中的id名称,使用点(.)对应wxml文件中的clss名称

const countDown = this.selectComponent('#vanCountDown'); countDown.start()

分享