vant Ui 按需引入

一、安装
1.npm i vite-plugin-style-import@1.4.1 -D //npm 安装
2.yarn add vite-plugin-style-import@1.4.1 -D//yarn安装
二、配置插件
//在 vite.config.js 文件中配置插件：
import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default {
plugins: [
vue(),
styleImport({
resolves: [VantResolve()],
}),
],
};

在非vite项目中
//babel.config.js 文件中配置如下代码：
{
"plugins": [
[
"import",
{
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}
]
]
}
三、引入
全局引入 main.js
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant)
按需引入
项目中可能用到多个vant组件，因此单独创建vant.js文件，在src下plugin（文件夹）中创建，代码如下
import Vue from 'vue'
//可引入多个需要组件，此处只引入Button做例，有多个写在...处
import {
Button,...
} from 'vant'

export default function vant(){
//此处只use Button做例，有多个写在...处
Vue.use(Button);
...
}

在main.js中，配置如下
import Vant from '@/common/vant'
Vant()
按需引入还可以（推荐）
//安装
npm i babel-plugin-import -D(简写)
npm install babel-plugin-import --save-dev(完整写法)

然后，在.babelrc文件中

"plugins": [
"transform-vue-jsx",
"transform-runtime",

["import",{"libraryName":"vant","style":true}]
]
最后，在main.js中

import {Button} from 'vant'
Vue.use(Button)
// 引入的多的话
import { Button, Row, Col } from 'vant'
Vue.use(Button).use(Row).use(Col)
4.自定义样式类来覆盖默认样式

5.使用