以此详细记录一下如何在小程序项目中使用vant weapp 以及搭建UI框架过程中遇到的坑

1、创建项目 （使用云开发）,创建后目录结构如下

2、根据vant weapp官方文档 快速上手 （https://youzan.github.io/vant-weapp/#/quickstart）开始配置项目

2.1 通过NPM安装

（这里选择yarn安装，因为通过实测 npm安装不会在根目录创建package.json, 安装后需要手动添加, 而yarn可以默认添加package.json）

安装成功后目录多出了两个文件，如下图

2.2 - 2.3 配置快速上手2、3步

2.4 执行第四步 构建npm (先去详情中勾选使用npm模块， 然后在 工具 -> 构建npm)

3、删除无用的目录结构 ,删除page中无用的文件，删除app.json中无用的目录 ，调整app.wxss

4、引入组件 正常使用 至此 已可使用vant weapp进行正常的小程序开发

5、说一下从开始使用到正常进入开发流程遇到的坑

我是3年前专注过1.5年的小程序 然后跳槽转型vue， 过去3年终专注vue管理端（v2 + cli + 全家桶）,间断这写了一个小程序项目，可以说是3年没写过小程序的（资深）开发者了

5.1 没有使用云端开发的目录结构，并且在快速上手的第一步使用了npm i @vant/weapp -S --production （它不会自动生成package.json）

生成目录结构 以及安装后的结构 如下图

结果到第四步npm构建的时候一直报错 找不到package.json

但是咱是cli资深玩家呀，vue.config.js不就是手动创建的么 ？ 这能难的住我 ？ 分分钟就手动新建一个

然后继续构建npm ok提示找不到miniprogram...

这不是问题 继续新建空白文件夹 miniprogram

然后继续构建npm 成功了 281毫秒 完美

然后引入vant weapp 。 报错

到这里 我已经开始头皮发麻了 。 这啥呀 ？ 一步一坑？ 然后开始查资料 github / vant 文档/ 百度 （， 后面我甚至在空白的miniprogram下把整个node_modules拷贝了进去 然后 "packageJsonPath": "./package.json", / "miniprogramNpmDistDir": "./miniprogram/" 又开始各种报错）

查了一圈， 没结果 然后去github下的vant weapp项目下提issue

这里是关键的一步，也是最后能完美认识问题的关键 因为社区有一个老哥 给我录了一个SP 并上传了百度网盘 。然后我仔细看了3遍

这里万分感谢这位老雷锋

终于在各种对比 各种测试下 弄清楚了问题原因

然后现在项目开发也结束了 ， 开发过程开始还是习惯写v-if / @click / 以及在<view bindtap="formatState(item.state)"> 这种 vue语法，后来又接触了wsx , template 以及 useComponents， 总体来讲 开发者工具的容错率有点高，然后就是与真机还是不能保持完全一致， 希望小程序继续加油！（早点解决input blur事件晚于页面bindtap事件等等问题）

以上