vue3 の unplugin-auto-import は自動的に導入されます

vue3の日常プロジェクトで変数を定義するためにrefやreactiveなどを導入するのは面倒ですが、unplugin-auto-importで自動導入することができます。

1. インストール

npm i -D unplugin-auto-import

2. vite.config.tsに導入

「unplugin-auto-import/vite」から AutoImport をインポートします

そしてプラグインで設定します。

デフォルトのdefineConfigをエクスポート({

        プラグイン: [

            ……

            AutoImport({  

              インポート: ['ビュー']、

              dts: 'src/auto-import.d.ts',

            })

        ]

}）

AutoImport には多くの構成項目が存在する可能性があります。詳細な構成を確認するには、github にアクセスしてください。

GitHub - antfu/unplugin-auto-import: Vite、Webpack、Rollup のオンデマンドでの自動インポート API

注: dts は私たちのために生成された型宣言ファイルであり、直接使用すると見つかりません。

上記の設定が完了すると、auto-import.d.ts ファイルが src ディレクトリに生成されます。これは、プロジェクトで直接使用できる Vue 関連のコンテンツを自動的にインポートするのに役立ちます。

注: 上記で dts を構成した後、auto-import.d.ts ファイルが自動的に生成されない場合があります。プロジェクトを再実行するか、エディターを閉じて再度開くことができます。

次のように使用します。

<script setup lang="ts">
  // 这里我们不用引入ref直接使用
  const msg = ref<string>('Hello Vue3')
</script>

<template>
  {
   
   { msg }}
</template>

<style scoped lang="scss"></style>