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

最新推荐文章于 2024-06-06 11:22:48 发布

雨季～～

最新推荐文章于 2024-06-06 11:22:48 发布

阅读量602

点赞数 8

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/Terenceno/article/details/137629250

版权

本文介绍了如何在Vite项目中通过unplugin-vue-components自动按需引入Vue组件，包括在vite.config.ts中的配置、全局引入AntDesignVue的样式，以及在HelloWorld.vue中使用Button组件的示例。

摘要由CSDN通过智能技术生成

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

pnpm install unplugin-vue-components -D

二、配置插件

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

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文件下引入全局样式文件

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

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

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

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

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

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