Cara menggunakan pemalam import automatik vue3 api

1. import automatik vue3

Prinsip:

• Sebelum pramuat, pemalam secara automatik mengimport atas permintaan Ya, gunakan api dan komponen

• dalam fail vue ini dan semasa menulis kod, hanya Tidak perlu mengimport

• Perhatikan bahawa ia bukan import global dan tidak akan menjejaskan sumber

2. Pengenalan automatik API

Ⅰ, perbandingan sebelum dan selepas penggunaan

Sebelum menggunakan pemalam:

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

Selepas menggunakan pemalam:

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

Ⅱ, pasang perisian pihak ketiga

npm i -D unplugin-auto-import

Ⅲ, konfigurasikan komponen pihak ketiga

vite.config konfigurasi:

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

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

bukan hanya di sebelah vue dan penghalaan, tetapi juga boleh ditambahkan pada tatasusunan import Komponen pihak ketiga yang lain

3 Pengenalan automatik komponen (artifak disyorkan oleh You Yuxi)

Ⅰ. , perbandingan sebelum dan selepas penggunaan

Gunakan Sebelum pemalam:

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

Selepas menggunakan pemalam: (Anda boleh memilih untuk mengimport folder )

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

Ⅱ, pasang perisian pihak ketiga

npm i -D unplugin-vue-components

Anda boleh menyediakan komponen untuk diimport atas permintaan atau anda boleh menyediakan rangka kerja UI untuk diimport atas permintaan (seperti: elemen tambah, Antd... : Tetapkan rangka kerja UI untuk dimuatkan secara automatik. Berhati-hati jangan untuk mengimport rangka kerja UI ke main.js Apabila pembungkusan pada masa yang sama, gunakan seberapa banyak komponen UI yang anda mahu pakejkan.

Atas ialah kandungan terperinci Cara menggunakan pemalam import automatik vue3 api. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!