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

1. 使用版本

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

2. 安装vite插件

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

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' // 引入 Input 组件
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>

5. 把需要引入的ant组件，整合到一个单独文件中，按需加载

• 新建一个JS文件，示例：在src目录下新建index.js：

// 按需引入组件
import {Button, Input, Layout, Menu} from 'ant-design-vue'

const components = [
    Button,
    Input,
    Layout,
    Menu
]

export function setupAntd(app) {
    components.forEach(component => {
        app.use(component)
    })
}

• 修改 main.js

import {createApp} from 'vue'
import App from './App.vue'
// import {Button} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import {router} from './router'
import store from "./store";
import {setupAntd} from "./index"; // 引用ant组件文件 index.js

const app = createApp(App);
// app.use(Button);
app.use(router);
app.use(store);
setupAntd(app); // 调用组件
app.mount('#app');

• 显示界面

  
  
  图片.png