Recommended automatic import tool for vue3 api

1. vue3 automatic import

Principle:

• Before preloading, the plug-in will automaticallyImport on demand, use it in this vue fileapiandComponents
• andWriting codeWhen it isNo import requiredIt's already
• Note that it is not a global import and will not affect the resources.

2. Automatic introduction of API (You Yuxi recommended artifact)

Ⅰ, comparison before and after use

Before using the plugin:

<script setup>
	import { ref } from "@vue/reactivity";
	import { useRouter } from "vue-router";
	const router = useRouter();
	const name = ref('Zhang San');
</script>

After using the plugin:

<script setup>
	const router = useRouter();
	const name = ref('Zhang San');
</script>

Ⅱ, install three-party parts

npm i -D unplugin-auto-import

Ⅲ, three-party components

Configuration:

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

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

Not only second to vue and routing, but also other three-party components can be added to the imports array.

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

Ⅰ, comparison before and after use

Before using the plugin:

<template>
  <div class="main">
    <Aside />
    <Footer />
  </div>
</template>
<script setup>
	import 	Aside from '/@/components/'
	import Footer from '/@/components/'
</script>

After using the plug-in: (You can select to press the imported folder)

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

Ⅱ, install three-party parts

npm i -D unplugin-vue-components

You can set up components that are imported on demand, or set up an UI framework that is imported on demand (such as: element plus, Antd…)

Ⅲ, three-party components

import { defineConfig } from "vite"; 

import Components from 'unplugin-vue-components/vite' // Load custom components on demandimport { ElementPlusResolver, AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {
  plugins: [
    Components({
      dts: true,
      dirs: ['src/components'], // Folders loaded on demand      resolvers: [
          ElementPlusResolver(),  // Antd load on demand          AntDesignVueResolver()  // ElementPlus load on demand     ] 
    })
  ],
  // ..................................
}

dirs property: Set the folder for automatically loading components. The default is ’ /src/component ’ resolvers property: Set the UI framework to automatically load. Be careful not to import the UI framework into . When packaging the UI framework at the same time, how many UI components are used and how many packages are used.

Summarize

This is the end of this article about the automatic import of vue3 api. For more related content related to automatic import of vue3 api, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!