So verwenden Sie das automatische Import-Plug-in der Vue3-API

1. vue3 automatischer Import

Prinzip:

• Vor dem Vorladen wird das Plug-in automatisch importiert. Diese Vue-Datei wird mit api und components

• geschrieben Code Es ist kein Import erforderlich. Beachten Sie, dass es sich nicht um einen globalen Import handelt und keine Auswirkungen auf die Ressourcen hat Vor dem Plug-In:

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

  after unter Verwendung von Plug-in:

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

  ⅱ, installieren Sie Teile von Drittanbietern, konfigurieren Teile von Drittanbietern

vite.config-Konfiguration:

import { defineConfig } from "vite"; 
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ imports: ['vue', 'vue-router'] }),
  ]
  //.........
})

ist nicht nur Vue und Routing unterlegen, sondern kann auch andere Komponenten von Drittanbietern zum Importarray hinzufügen

3. Automatische Einführung von Komponenten (You Yuxi empfohlenes Artefakt)

Ⅰ, Vergleich vor und nach der Verwendung

Vor Verwendung des Plug-Ins:

<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>

Nach Verwendung des Plug-Ins: (Sie können den Ordner importieren)

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

Ⅱ, Installieren Sie Komponenten von Drittanbietern. element plus, Antd …)

Ⅲ, Drei-Parteien-Komponenten konfigurieren

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

dirs-Attribut: Legen Sie den automatisch geladenen Komponentenordner fest, der Standardwert ist ’ /src/component ' Resolver-Attribut: Stellen Sie das UI-Framework auf automatisch ein Achten Sie darauf, das UI-Framework nicht gleichzeitig in main.js zu importieren, wie viele UI-Komponenten verwendet werden und wie viele gepackt werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das automatische Import-Plug-in der Vue3-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!