vue3 API自動インポートプラグインの使い方

1. vue3 自動インポート

原則:

• プリロードする前に、プラグインは自動的に オンデマンドでインポートします はい、この vue ファイルでは api と コンポーネント

• を使用し、コードを記述するときは だけを使用してください ##インポートする必要はありません

• これはグローバル インポートではないため、リソースには影響しません

#2. API

Ⅰ. 使用前と使用後の比較

#プラグイン使用前:

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

Afterプラグインの使用:

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

Ⅱ. サードパーティ ソフトウェアのインストール

npm i -D unplugin-auto-import

Ⅲ. サードパーティ ソフトウェアの設定

##vite.config 設定:

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

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

はありませんvue と routing のみが後に続きますが、imports 配列に追加することもできます その他のサードパーティ コンポーネント

#3. コンポーネントの自動導入 (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-components

オンデマンドでインポートされるコンポーネントを設定することも、オンデマンドでインポートされる UI フレームワーク (要素プラス、Antd など) を設定することもできます。: UI フレームワークを自動的にロードするように設定します。 UI フレームワークを main.js にインポートします。同時にパッケージ化する場合は、パッケージ化する数の UI コンポーネントを使用します。

以上がvue3 API自動インポートプラグインの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。