vite2.x实现按需加载ant-design-vue@next组件的方法

这篇文章主要介绍了vite2.x实现按需加载ant-design-vue@next组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一

这篇文章主要介绍了vite2.x实现按需加载ant-design-vue@next组件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

1.使用版本

vite:2.0
ant-design-vue: 2.0.0-rc.8
vue:3.0.5

2.安装vite插件

1	`yarn add vite-plugin-style-import` `-D or npm i vite-plugin-style-import` `-D`

插件仓库地址：github

3.vite.config.js配置

									import vue from '@vitejs/plugin-vue'

									import styleImport from 'vite-plugin-style-import';

									/**

									 * @type {import('vite').UserConfig}

									 */

									export default {

									 plugins: [

									  vue(),

									  styleImport({

									   libs: [{

									    libraryName: 'ant-design-vue',

									    esModule: true,

									    resolveStyle: (name) => {

									     return `ant-design-vue/es/${name}/style/css`;

									    },

									   }]

									  })

									 ]

									}

4.测试运行

main.js

									import { createApp } from 'vue'

									import App from './App.vue'

									import { Input } from 'ant-design-vue';

									const app=createApp(App)

									app.use(Input)

									app.mount('#app')

组件中使用

									<template>

									 <!-- script-setup内引入使用，不需注册-->

									 <Button type="primary"> Primary</Button>

									 <!-- 在mian.js使用use注册组件 -->

									 <a-input placeholder="Basic usage" />

									</template>

									<script setup>

									import { Button } from "ant-design-vue";

									</script>