2022年在uniapp中引入vant Weapp

2022年11月7日亲测有效

目录

步骤一：下载这个插件，有两种方式

步骤二：

 

步骤三：

步骤四：

步骤五：

注意： 

---

步骤一：下载这个插件，有两种方式

    方式一：从github上下载该插件https://github.com/youzan/vant-weapp

 只要这个dist文件夹，把dist重命名为vant,完成这一步请直接去看步骤二。

方式二：使用HBuilderX，“工具”---“插件安装”---“安装新插件”---“前往插件市场安装”---“搜索vant”，此时插件市场可能为空，修改筛选条件就出来了，使用HBuilderX软件导入。此时就会生成一个目录，由于首次在uniapp中使用vant，我的路径名称都是和网上要求一模一样的，以免后续出现问题，此方式如果有问题可私信我

步骤二：

与pages文件夹同级（在项目根目录），创建一个空的文件夹，名为wxcomponents

将vant（由dist文件夹重命名为vant的文件）文件夹放到wxcomponents里面

 

步骤三：

在pages.json中开始配置，这也是最重要的，我在这上面错了很多东西，一直在报错，报错类型大多都是在说找不到某个路径的.vue文件，是因为新下载的dist里面已经没有vue文件了，具体我也不清楚，如果你尝试过很多教程都有问题，可以试试我的这个步骤，开始吧！

1.easycom配置

//easycom配置
	        "easycom": {
	          "autoscan": true, 
	          "custom": {
	              "van-(.*)": "@/wxcomponents/vant/$1/index"
	          }
	        },

2.将组件放置全局使用，也别单个弄了，单个的话你直接放到pages下与path同级

"usingComponents":{
					 "van-button": "/wxcomponents/vant/button/index",
					 
		}

步骤四：

在app.vue中全局引入样式

<style lang='scss'>
	@import "/wxcomponents/vant/common/index.wxss"
</style>

步骤五：

使用组件

 

注意： 

1.如果严格按照上方步骤依然存在错误，可尝试停止运行微信小程序，关闭微信开发者工具，重新使用HbuilderX来启动微信开发者工具，可能会解决你的问题

2.如果您只是按钮效果可以，其他的不行，那需要看看你注册组件时的路径是否能找到