1、首先要有uniapp項目，根據(jù)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文件夾

?。。。”仨毷莣xcomponents文件夾！

?。。?！必須是wxcomponents文件夾！

?。。?！必須是wxcomponents文件夾！

（原因：和微信開發(fā)者工具內(nèi)部編譯文件名一致，具體原因不詳）

3、將node_modules/@vant/weapp/下的dist文件夾復(fù)制粘貼到wxcomponents文件夾下（wxcomponents/dist）或者（wxcomponents/vant/dist）等等確保文件正確

? ? ? ? 截圖如下：

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

<style lang="scss">
	/*每個頁面公共css */
/* #ifdef MP-WEIXIN */
	@import "/wxcomponents/dist/common/index.wxss"; //路徑要確保正確?。。?！
/* #endif */	
</style>

?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、使用引入的模塊：

運行結(jié)果：

代碼：

<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>

文章來源地址http://www.zghlxwxcb.cn/news/detail-563618.html

到了這里，關(guān)于uniapp微信小程序引入vant組件庫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！