vue3 API 자동 가져오기 플러그인 사용 방법

1.vue3 자동 가져오기

원리:

• 플러그인은 자동으로 요청 시 가져오기를 사용하여 작성되었습니다. 코딩할 때 , import할 필요가 없습니다

글로벌 가져오기가 아니며 리소스에 영향을 미치지 않습니다

• 2. API 자동 도입

  Ⅰ, 사용 전후 비교

• 사용법 플러그인 전:

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

플러그인 사용 후:

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

Ⅱ, 타사 부품 설치

npm i -D unplugin-auto-import

III, 구성 타사 부품

vite.config 구성:

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

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

은 vue 및 라우팅보다 열등할 뿐만 아니라 가져오기 배열에 다른 타사 구성 요소를 추가할 수도 있습니다.

3 구성 요소 자동 도입(권장 아티팩트) by You Yuxi)

Ⅰ, 사용 전 후 비교

플러그인 사용 전 :

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

Ⅱ , 타사 구성 요소 설치

npm i -D unplugin-vue-comComponents

요청 시 가져올 구성 요소를 설정하거나 요청 시 가져오도록 UI 프레임워크를 설정할 수 있습니다(예: : element plus, Antd …)

Ⅲ, 3자 구성 요소 구성

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

dirs 속성: 자동 로딩 구성 요소 폴더 설정, 기본값은 ’ /src/comComponent ' 확인자 속성: UI 프레임워크를 다음으로 설정 자동으로 로드됩니다. UI 프레임워크를 main.js로 가져오지 않도록 주의하세요. 동시에 패키징할 때 사용되는 UI 구성 요소 수와 패키징되는 수는 얼마입니까?

위 내용은 vue3 API 자동 가져오기 플러그인 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!