1、这里创建uniapp的项目本人选择的是Vue2的

在这里插入图片描述

打开 Vant 官网 这里是使用Vant2的切记别选择Vant3 不知道的可以点击这里进入 Vant官网

点击上面的 微信小程序版本

在这里插入图片描述

进入这个界面后点击 快速上手 这里是使用npm安装的

在这里插入图片描述

使用 cmd 打开创建文件的路径

在这里插入图片描述

将npm的命令复制进去执行 :

 npm i @vant/weapp -S --production

在这里插入图片描述

文件目录多了一个 node_modules文件

在这里插入图片描述

将 vant 引入 uniapp 也是最重要的一步，本人查了一天的uniapp引入vant 结果文章基本都一个样的各种报错

3.1、新创建个文件夹这里随意命名本人命名是 wxcomponents 随着网上的来了

3.2、这里打开 node_modules/@vant/weapp 将 weapp里的dist文件复制到 wxcomponents这个文件里面 最终的结果为：

在这里插入图片描述

打开 App.vue 引入：

	@import "/wxcomponents/dist/common/index.wxss";

在这里插入图片描述

最后打开 pages.json 根目录的 pages,json 别打开错了 将这段话输入进去:

	"usingComponents": {
			//这里是引入的组件  我是全局引入的  不想全局引入则在pages的路由下引入

			//这是引入的按钮
			"van-button": "wxcomponents/dist/button/index"
		}

最终结果

在这里插入图片描述

别一直看要记得保存哦！检查好要运行的项目 然后运行看结果

在这里插入图片描述

`大功告成！`

如果还出错则可以去我得GitHub进行拉去：https://github.com/ZoeyMoney/uniapp-vant

uniapp 引入 Vant 从零开始