Principe :
avant le préchargement, le plug-in importe automatiquement à la demande Ce fichier vue est écrit en utilisant api et components
. Quand code , il n'est pas nécessaire d'importer
Utilisation. Avant le plug-in :
<script setup>
import { ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
const router = useRouter();
const name = ref('张三');
</script>
<script setup>
const router = useRouter();
const name = ref('张三');
</script>
npm i -D unplugin-auto-importⅢ, configurez parties tierces
configuration vite.config :
import { defineConfig } from "vite";
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
AutoImport({ imports: ['vue', 'vue-router'] }),
]
//.........
})
Introduction automatique de composants (artefact recommandé). par You Yuxi)
Ⅰ, Comparaison avant et après utilisationAvant d'utiliser le plug-in :
<template>
<div class="main">
<Aside />
<Footer />
</div>
</template>
<script setup>
import Aside from '/@/components/Aside.vue'
import Footer from '/@/components/Footer.vue'
</script>
<template> <div class="main"> <Aside /> <Footer /> </div> </template> <script setup></script>
npm i -D unplugin-vue-componentsⅢ, configurez les composants tiersVous pouvez configurer des composants à importer à la demande, ou vous pouvez configurer des cadres d'interface utilisateur à importer à la demande (tels que : element plus, Antd …)
import { defineConfig } from "vite";
import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver, AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {
plugins: [
Components({
dts: true,
dirs: ['src/components'], // 按需加载的文件夹
resolvers: [
ElementPlusResolver(), // Antd 按需加载
AntDesignVueResolver() // ElementPlus按需加载
]
})
],
// ..................................
}
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!