Vite中怎么使用Ant Design Vue3.x框架

今天小编给大家分享一下Vite中怎么使用Ant Design Vue3.x框架的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

安装 ant-design-vue

npm i --save ant-design-vue

main.js引入，全局使用

import { createApp } from 'vue'import App from './App.vue'import router from './router/index'import store from './store/index'import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';createApp(App).use(Antd).use(router).use(store).mount('#app') //use必须要在mount之前

按需引入

官网没怎么写，估计很多人比较懵

首先将main.js中全局引入的注释掉

安装按需引入插件

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,} from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/export default defineConfig({  plugins: [      vue(),      Components({        resolvers: [          AntDesignVueResolver(),        ],      })    ],})

注意：使用的 Vite，你可以使用unplugin-vue-components来进行按需加载。但是此插件无法处理非组件模块，如 message，这种组件需要手动加载：

import { message } from 'ant-design-vue';import 'ant-design-vue/es/message/style/css';

以上就是“Vite中怎么使用Ant Design Vue3.x框架”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。