uniapp微信小程序引入vant组件库

1、首先要有uniapp项目，根据vant官方文档使用yarn或npm安装依赖：

1、 yarn init 或 npm init

2、 # 通过 npm 安装
    npm i @vant/weapp -S --production

    # 通过 yarn 安装
    yarn add @vant/weapp --production

    # 安装 0.x 版本
    npm i vant-weapp -S --production

安装完依赖如下：

2、在uniapp项目根目录下(也可以指定目录)本案例在根目录下新建：wxcomponents文件夹

！！！！必须是wxcomponents文件夹！

！！！！必须是wxcomponents文件夹！

！！！！必须是wxcomponents文件夹！

（原因：和微信开发者工具内部编译文件名一致，具体原因不详）

3、将node_modules/@vant/weapp/下的dist文件夹复制粘贴到wxcomponents文件夹下（wxcomponents/dist）或者（wxcomponents/vant/dist）等等确保文件正确

        截图如下：

4、配置样式在App.vue文件中：

 5、配置按需引入vant组件模块在pages.json文件夹中：

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"usingComponents": {
			"van-button": "/wxcomponents/dist/button/index",
			"van-circle": "/wxcomponents/dist/circle/index"
		}
	},

 

 6、使用引入的模块：

运行结果：

代码：