微信小程序安装npm记录

微信小程序开发工具提供了支持使用第三方控件的功能,比如Vant Weapp,Vant Weapp的文档上也说了,要使用第一步就是要安装npm,但是文档比较简单,看了还是不知道怎么做,下面记录一下我摸索的整个过程。

1.开始我们小程序是没有以下这些文件的,比如如下所示:

微信小程序安装npm记录

 

微信小程序安装npm记录

 

红色方框标记出来的是原本没有的文件,通过CMD到小程序项目的文件夹目录,然后执行npm init,此时并不会创建package.json文件,这个时候我们一直敲击键盘enter键,会发现package.json文件已经有了,但是Vant Weapp的安装文档中明明有说 package.json 和 node_modules 必须在 miniprogram 目录下,但是目前还没有node_modules文件夹,我选择的是在项目目录下新建这个文件夹,然后执行npm i vant-weapp -S --production安装VANT组件。这时候会发现项目里会多出两个文件夹    miniprogram_npm  和  node_modules。而且这两个文件里面已经有东西了。

然后在微信小程序的开发开发工具中点击:工具--构建npm(会弹出下图的构建npm结果,虽然提示完成构建,index.js未找到npm包入口文件,但是好像并不影响我们正常使用vant了)--点击右上角“详情--本地设置--使用nmp”操作这一块的流程就结束了

微信小程序安装npm记录

后面就是代码操作了,这一块直接按照Vant Weapp的操作来即可:

微信小程序安装npm记录

然后就是正常使用vant组件了。