本地开发的引入方法

新建微信小程序

这里讲的是不使用云开发的引入方法，不过两者大同小异。

记住小程序的目录路径

看vant的开发文档

Vant Weapp 开发文档入口

文档里面的快速上手有讲到npm如何安装，但是直接按照上面的步骤一步一步来，是构建不了npm的。 我们从步骤二开始。

修改app.json

修改 project.config.json

这一步还有一点要注意，就是vant文档中特别提到的 这个注意是什么意思呢，写的太官方看不懂不要紧，只要看懂 目录文件结构问题 就行了，一会我们就会遇到这个问题了。

上面的两个步骤做完，我们回忆一下小程序的目录路径是什么。然后进行下一步。

操作终端

打开终端，进入项目根目录

打开终端快捷键 win + R 然后在运行工具中输入 cmd 回车。

运用 cd 命令切换到项目根目录

运行命令

在项目根目录运行按顺序以下命令 npm init 回车，出现下面的文字

然后我们就一路回车，当然如果有需要你也可以自己输入一些东西，因为出现的都是有关项目的一些基本信息的填写

初始化完成之后，在项目的根目录会出现一个 package.json 文件

然后我们继续输入Vant文档中的npm安装命令

npm i @vant/weapp -S --production 回车

npm i vant-weapp -S --production 回车

微信开发者工具

上面的操作完，就回到微信开发者工具里面，进行最后的步骤

构建npm工具

点击构建npm，如果不出意外的话，应该是会报下面的这个错的

意思是，在它显示的路径下面找不到package.json文件，然后我们再仔细看一下图片上的路径，以及结合Vant开发文档之前提醒我们注意的那一点。

先去到项目根目录，发现并没有miniprogram这个文件夹，所以 修改 project.config.json 这一步，我们应该改成下面这样

这样就可以找到package.json文件了。然后我们再重新构建一次npm。

构建需要一段时间 等一会。

构建完成后，发现项目根目录多了一个文件夹，如下图

这就说明引入成功了，然后下一步。

使用npm模块

最后

最后当然是试一下在页面上能否成功引入啦，我们试一下引入vant的button组件，引入方式看文档。

这就说明成功了。

云开发的引入方式

云开发的引入方式其实和本地引入是一样的，不一样的地方就是 修改 project.config.json 这一步，因为云开发创建的项目它是有miniprogram这个文件夹的，所以不需要改成 ./ 其他都一样。