Vite中使用Ant|Vite中使用Ant Design Vue3.x框架教程示例 Vite中使用AntDesignVue3.x框架教程

引言

安装 ant-design-vue
main.js引入，全局使用

按需引入

引言官网:
https://www.antdv.com/docs/vue/introduce-cn
文档选择vue3版本，也是官网当前推荐的

Vite中使用Ant|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中全局引入的注释掉
【Vite中使用Ant|Vite中使用Ant Design Vue3.x框架教程示例】

文章图片

安装按需引入插件

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，这种组件需要手动加载：