vite + vue3 + ts 自动按需导入ant-design-vue组件

安装ant-design-vue

--npm
npm install ant-design-vue --save

--yarn
yarn add ant-design-vue

 icon图标

--ant-design
npm install --save @ant-design/icons-vue

 main.ts引入

//ant-design-vue
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

 自动按需导入包

 如果你是从vite+vue3+ts 手把手教你创建一个vue3项目  过来的,已经下过了,就不用再下了,只要添加有ant-design-vue注释的那行就行

 npm install -D unplugin-vue-components unplugin-auto-import 

vite.config.ts文件下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';
//ant-design-vue
import {AntDesignVueResolver} from "unplugin-vue-components/resolvers"

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      //安装两行后你会发现在组件中不用再导入ref，reactive等
      imports: ['vue', 'vue-router'],
      dts: "src/auto-import.d.ts",
      //ant-design-vue
      resolvers: [AntDesignVueResolver()]
    }),
   Components({
      //ant-design-vue   importStyle = false 样式就没了
        resolvers: [AntDesignVueResolver({importStyle: true, resolveIcons: true})],
    }),
  ]
})