How to use vue3 api automatic import plug-in

1. vue3 automatic import

Principle:

• Before preloading, the plug-in automatically imports on demand Yes, use api and components

• in this vue file and when writing code, justNo need to import

• Note that it is not a global import and will not affect the resources

2. Automatic introduction of API

Ⅰ. Comparison before and after use

Before using the plug-in:

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

After using the plug-in:

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

Ⅱ. Install third-party software

npm i -D unplugin-auto-import

Ⅲ. Configure third-party software

##vite.config configuration:

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

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

is not only followed by vue and routing, but can also be added to the imports array Other third-party components

3. Automatic introduction of components (recommended artifact by You Yuxi)

Ⅰ. Comparison before and after use

Use Before the 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>

After using the plug-in: (You can choose to import the folder)

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

Ⅱ. Install third-party software

npm i -D unplugin-vue-components

You can set up components to be imported on demand, or you can set up UI frameworks to be imported on demand (such as: element plus, Antd... : Set the UI framework to load automatically. Be careful not to import the UI framework into main.js. When packaging at the same time, use as many UI components as you want to package.

The above is the detailed content of How to use vue3 api automatic import plug-in. For more information, please follow other related articles on the PHP Chinese website!