vue3项目学习记录＜二＞---Ant Design Vue组件之按需引入

雨季～～2024-04-16 19:21

一、自动按需引入插件安装

二、配置插件

1、在vite.config.ts下添加代码，如下：

javascript 复制代码

import Component from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import type { PluginOption } from 'vite'

plugins: [
	Component({
    	resolvers: [
        // 注意:按需引入，无法引入一些非组件模块，如：message,modal等，需要自定义手动导（src/plugin/antDesign）
        AntDesignVueResolver({
       	    importStyle: false //不单独导入样式，对样式进行全局引入
        })
   	 ]}) as PluginOption
]

2、在mian.ts文件下引入全局样式文件

javascript 复制代码

import 'ant-design-vue/dist/reset.css'

以上自动按需导入就配置好了，在项目中就可以直接使用组件了，无需再次进行导入

3、如在helloword.vue组件中使用Button组件

javascript 复制代码

<script setup lang="ts">
 //注意：无需再次引入button组件了
 import { message } from "ant-design-vue";

 onMounted(()=>{
    message.warn('非组件模块，单独引入一下即可')
 })
</script>

<template>
	<a-button type="primary">测试组件引入</a-button>
</template>