组件按需导入和函数自动导入

1.关于unplugin-vue-components 按需导入

一般用于第三方组件库的按需导入

1. pnpm i unplugin-vue-components -D
2. vite.config.js中引入和配置 ps:前提安装组件库

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver, Vuetify3Resolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
 plugins: [
   vue(),
   Components({
     dts: './types/auto-imports.d.ts', //生成配置文件和避免ts报错问题
     dirs: ['src/components'], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
     resolvers: [AntDesignVueResolver({ importStyle: false ,resolveIcons: true,}), Vuetify3Resolver()],
     directoryAsNamespace: true,
   }),
 ],
})

3. 模板中直接可以使用,不需要再main中再引入各个组件库ui

<a-button>{{ msg }}</a-button>

2.关于unplugin-auto-import 自动导入

一般用于通用模块导入 例如:import {ref} from 'vue'

1. pnpm i unplugin-auto-import -D
2. vite.config.js中引入和配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
 plugins: [
   vue(),
     AutoImport({
       imports: ['vue', 'pinia',xxxx],  //再setup中无需再手动引入vue及pinia相关api
       dts: "./src/auto-import.d.ts"   //避免ts报错问题
     })
 ],
})

3. 在脚本中直接使用

<script setup lang="ts">
    const msg = ref("按钮")
</script>
<template>
    <a-button>{{ msg }}</a-button>
</template>