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

Z编程2025-04-10 23:30

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

bash 复制代码

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文件夹！

（原因：和微信开发者工具内部编译文件名一致）
3、将node_modules/@vant/weapp/下的dist文件夹复制粘贴到wxcomponents文件夹下（wxcomponents/dist）或者（wxcomponents/vant/dist）等等确保文件正确

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

javascript 复制代码

<style lang="scss">
	/*每个页面公共css */
/* #ifdef MP-WEIXIN */
	@import "/wxcomponents/dist/common/index.wxss"; //路径要确保正确！！！！
/* #endif */	
</style>

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

javascript 复制代码

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

6、使用引入的模块：

运行结果：

代码：

javascript 复制代码

<template>
	<view class="content">
		<van-button type="default">默认按钮</van-button>
		<van-button type="primary">主要按钮</van-button>
		<van-button type="info">信息按钮</van-button>
		<van-button type="warning">警告按钮</van-button>
		<van-button type="danger">危险按钮</van-button>
		<view style="margin-top: 30rpx;">
			<van-circle :value="value" :color="gradientColor" text="渐变色" />
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				value: 0, //进度
				gradientColor: { //渐变色
					'0%': '#ffd01e',
					'50%': '#aa55ff',
					'100%': '#ee0a24',
				},
				item: null,
			}
		},
		onUnload() {
			clearInterval(this.item)
			this.item = null
		},
		onLoad() {
			this.item = setInterval(() => {
				if (this.value >= 100) {
					this.value = 0
					return
				} else {
					this.value += 10
				}
			}, 1000)
		},
		methods: {
 
		}
	}
</script>
 
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

本文为转载文章，仅供本人记录日常问题

原文链接：uniapp微信小程序引入vant组件库_uniapp怎么配置vant的按需导入-CSDN博客