uniapp 引入 Vant 从零开始

闷声发大财..

已于 2022-08-24 15:59:34 修改

阅读量2.8k

点赞数 5

分类专栏： Vant 文章标签： uni-app vue.js 前端

于 2022-08-24 15:28:52 首次发布

本文链接：https://blog.youkuaiyun.com/qq_32825399/article/details/126504536

版权

1 篇文章

订阅专栏

本文档详细介绍了如何在uniapp项目中引入Vant Weapp，包括创建项目、从Vant官网获取微信小程序版本、通过npm安装、在App.vue中引入样式以及在pages.json中配置使用组件的步骤。作者提供了遇到问题时的解决资源，并分享了完整流程，帮助开发者成功集成Vant Weapp。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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