Vite中使用Ant Design Vue3.x框架

程序员 2024-9-4 01:28:52 174 0 来自 中国
官网:
https://www.antdv.com/docs/vue/introduce-cn文档选择vue3版本,也是官网当前保举的

安装 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';
您需要登录后才可以回帖 登录 | 立即注册

Powered by CangBaoKu v1.0 小黑屋藏宝库It社区( 冀ICP备14008649号 )

GMT+8, 2025-2-1 06:00, Processed in 0.129927 second(s), 32 queries.© 2003-2025 cbk Team.

快速回复 返回顶部 返回列表