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>

  Nach dem Login kopieren
  after unter Verwendung von Plug-in:

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

  Nach dem Login kopieren
  ⅱ, installieren Sie Teile von Drittanbietern, konfigurieren Teile von Drittanbietern

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

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

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

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

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

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!