How to use vue3 api automatic import plug-in-Vue.js-php.cn

How to use vue3 api automatic import plug-in

WBOY

Release： 2023-05-10 15:25:06

forward

2071 people have browsed it

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>

Copy after login

After using the plug-in:

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

Copy after login

Ⅱ. Install third-party software

npm i -D unplugin-auto-import

Ⅲ. Configure third-party software

##vite.config configuration:

import { defineConfig } from "vite"; 
import AutoImport from &#39;unplugin-auto-import/vite&#39;

export default defineConfig({
  plugins: [
    AutoImport({ imports: [&#39;vue&#39;, &#39;vue-router&#39;] }),
  ]
  //.........
})

Copy after login

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>

Copy after login

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

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

Copy after login

Ⅱ. 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!