第一步

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/weappweapp里的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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐