【Vue3】Vue3中安装和配置Vant组件库

一、安装vant

        1、Vue 3项目输入：npm i vant

 2、vue2项目输入：npm i vant@latest-v2

二、安装个unplugin-vue-components 插件,按需引用

输入：npm i unplugin-vue-components -D

//通过npm安装
npm i unplugin-vue-components -D
 
//通过yarn安装
yarn add unplugin-vue-components -D
 
//通过pnpm安装
pnpm add unplugin-vue-components -D

三、配置main.js

import { createApp } from 'vue'
import App from './App.vue'

// ======= 路由
import router from '../router'

// ======= awesome字体图标
import '../src/js/font-awesome/css/font-awesome.css'

// ======= element

import ElementPlus from 'element-plus'
import '../node_modules/element-plus/dist/index.css'

// ======= vant

import Vant from 'vant';
import '../node_modules/vant/lib/index.css';


createApp(App).use(router).use(Vant).use(scroll).use(ElementPlus, { size: 'small', zIndex: 3000 }).mount("#app");

//注意use要在mount之前
// createApp(App).use(router).mount('#app')

四、在页面引用组件

  <div>

    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>