vue3 自动导入composition

composition"/>

vue3 自动导入composition

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按需加载] })],
}