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按需加载] })],
}
更多推荐
vue3 自动导入composition
发布评论