vue3 自动导入composition-apiI和组件

1.api的自动导入

常规写法：

<script setup>
	import { ref, reactive,  onMounted, computed ,watch } from 'vue';
	import { useRouter } from "vue-router";
	const router = useRouter();
	const person= reactive ({
        name：'张三'，
        age:20
);
</script>

使用插件后：

<script setup>
	const router = useRouter();
	const person= reactive ({
        name：'张三'，
        age:20
);
</script>

安装插件：

npm i -D unplugin-auto-import

vite.config 配置：

import { defineConfig } from "vite"; 
import AutoImport from 'unplugin-auto-import/vite' //引入api自动导入插件

export default defineConfig({
//imports 数组中加入其它的三方件
  plugins: [
    AutoImport({ imports: ['vue', 'vue-router','xxx'] }),
  ]
})

2.组件的自动导入

使用前：

<template>
  <HelloWorld />
</template>
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>

使用插件后：

<template>
  <HelloWorld />  //直接使用组件 不用import引入
</template>
<script setup>
</script>

此插件也可以直接使用其他组件，比如常用的UI框架，如elementPlus

可以支持这些插件：

安装插件：

npm i -D unplugin-vue-components

vite.config配置：

import { defineConfig } from "vite"; 

import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {
  plugins: [
    vue(),
    Components({
      dts: true,
      //设置自动加载 组件的文件夹
      dirs: ['src/components'], // 按需加载的文件夹
      //设置UI框架自动加载 ,注意不要向main.js中导入UI框架了
      resolvers: [
           ElementPlusResolver()  // ElementPlus按需加载
     ] 
    })
  ],
}