Comment utiliser le plug-in d'importation automatique de l'API Vue3

1. importation automatique vue3

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

Notez qu'il ne s'agit pas d'une importation globale et n'affectera pas les ressources
2 Introduction automatique de l'API

Ⅰ, comparaison avant et après utilisation

Utilisation. Avant le plug-in :

<script setup>
	import { ref } from "@vue/reactivity";
	import { useRouter } from "vue-router";
	const router = useRouter();
	const name = ref(&#39;张三&#39;);
</script>

Après avoir utilisé le plug-in :

<script setup>
	const router = useRouter();
	const name = ref(&#39;张三&#39;);
</script>

Ⅱ, installez des pièces tierces

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'] }),
  ]
  //.........
})

est non seulement inférieure à vue et au routage, mais peut également ajouter d'autres composants tiers dans le tableau des importations

Introduction automatique de composants (artefact recommandé). par You Yuxi)

Ⅰ, Comparaison avant et après utilisation

Avant d'utiliser le plug-in :

<template>
  <div class="main">
    <Aside />
    <Footer />
  </div>
</template>
<script setup>
	import 	Aside from &#39;/@/components/Aside.vue&#39;
	import Footer from &#39;/@/components/Footer.vue&#39;
</script>

Après utilisation du plug-in : (Vous pouvez choisir d'importer le dossier)

<template>
  <div class="main">
    <Aside />
    <Footer />
  </div>
</template>
<script setup></script>

Ⅱ , installez des composants tiers

npm i -D unplugin-vue-components

Vous pouvez configurer des composants à importer à la demande, ou vous pouvez configurer des cadres d'interface utilisateur à importer à la demande (tels que : element plus, Antd …)

Ⅲ, configurez les composants tiers

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

attribut dirs : définissez le dossier de composant à chargement automatique, la valeur par défaut est ’ /src/component ' attribut de résolution : définissez le cadre de l'interface utilisateur sur se charge automatiquement. Veillez à ne pas importer le framework d'interface utilisateur dans main.js en même temps, combien de composants d'interface utilisateur sont utilisés et combien sont empaquetés.

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!