小程序(原生) | 引入Vant Weapp

近期做小程序用到vant框架（原生小程序开发版），记录下构建过程。

方式：通过 npm 安装

1.文件夹右键 -> 终端打开

2. vant官网引导的安装方法

先初始化：npm init

3.打开app.json  ，删除以下代码

"style": "v2",

4. 打开project.config.json 文件

在setting对象中增加

"packNpmManually": true,
"packNpmRelationList": [
	{
	"packageJsonPath": "./package.json",
	"miniprogramNpmDistDir": "./"
	}
],

PS： 这边还要注意下vant官网上对miniprogramNpmDistDir路径提示

         新版开发者工具的就像我一样用 “./”

5.构建npm包

①打开微信开发者工具，点击 工具 -> 构建 npm，

②开发者工具右上角详情 -> 勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

 

根据以上步骤碰到的问题：

①.构建完后没发现 miniprogram_npm依赖包，当时怕自己会不会搞错顺序什么的 ，就删掉项目重新构建一遍，结果还是一样的。

于是就找了下安装vant 的npm指令，发现自己少了   npm init

PS： 补上去后 重新安装下就好了

然后找下官网的例子拿进去引入下测试看看有没有问题

 最后就开启vant之旅吧~