vite按需引入ant design vue或element plus

ant 的官网的使用介绍是在 vite.config.js 文件中引用 ‘’vite-plugin-components‘’，试了半天发现不管用，发现他改名字了。。。

首先

npm i unplugin-vue-components -D

使用方式

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver, ElementPlusResolver } from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
  Components({
    resolvers: [AntDesignVueResolver(), ElementPlusResolver()]
  })
  ]
})

这就可以了，两个都有

至于ant图标好像并不可以，还是乖乖自己引吧
element 的到是可以，但不太推荐
在main.js下

iimport { createApp } from 'vue'
import App from './App.vue'
import * as Elicons from '@element-plus/icons-vue';
const app = createApp(App);
// for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
//     app.component(key, component)
//   }
Object.keys(Elicons).forEach((key) => {
    // 如果使用的是ts语法，加上as keyof typeof Elicons可避免报错
    app.component(key, Elicons[key as keyof typeof Elicons]);
});
app.mount('#app')