uniapp项目引入vant4 npm下载

最近在自己测试项目中想引用vant组件，去看博客大部分都是教使用压缩包下载，然后要新建一个文件夹之类的，由于自己的npm安装的，就介绍一下如何npm下载并全局注册的方法

npm下载vant

//仅展示vue3 加 vant4的效果
 
npm i vant复制

下载完成后可以在package.json中查看vant的版本

全局注册

在main.js文件中添加以下代码——引入组件及样式

import Vant from 'vant'
import 'vant/lib/index.css';复制

完整的样式应该是这样 

放在import { createSSRApp } from 'vue' 之后 ，createApp方法之前

页面中使用，以van-botton为例

<view class="content">
		<scroll-view scroll-y="true">
			<radio-group @change="radioChange">
				<view class="radio-item" v-for="item in items" :key="item.value">
					<view>
						<radio :value="item.value" :checked="item.value === current" />
					</view>
					<view>{{item.name}}</view>
				</view>
			</radio-group>
		</scroll-view>
		<view class="btn">
			<van-button type="success" @click="buyEvt()">购买</van-button>
		</view>
	</view>复制

注意 vant中的反馈组件需要单独引用

以Dialog弹窗为例，需要在页面中单独引用

import { showConfirmDialog } from 'vant';
 
//触发demoEvt方法时，展示弹窗
function demoEvt(){
    showConfirmDialog({
      title: '标题',
      message:'内容',
})
  .then(() => {
    console.log('点击了确认');
  })
  .catch(() => {
    console.log('点击了取消');
  });
}复制