全画面インポートに別れを告げましょう! unplugin-auto-import/vite は vue 関連の API を自動的にインポートします

序文

vue プロジェクトでは、多くの vue 関連関数とその他のインポートを導入します。次のように、多くの行を記述する必要があり、非常に面倒に見えます。

また、vue の API を使用するときに、引用符を忘れることがあり、非常に不便です。unplugin-auto-import/vite プラグインはこの問題を完全に解決できます。

導入

unplugin-auto-import/vite は、Vue/Vue Router などの公式 API をオンデマンドで自動インポートするプラグインです。

このプラグインを使用すると、「vue」からインポート {xx} などのコードを手動で記述する必要がなくなり、関連する API を直接使用して開発効率が向上します。

// 原来写法
import { computed, ref } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

// 使用插件后
const count = ref(0)
const doubled = computed(() => count.value * 2)

使用

1. インストール

npm i -D unplugin-auto-import

2. 設定ファイルの使用方法

• 速い

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ 
        imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue和vue-router相关函数
        dts: './auto-import.d.ts' // 生成 `auto-import.d.ts` 全局声明（ts项目添加上）
    }),
  ],
})

• ウェブパック

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({
        imports: ['vue', 'vue-router', 'pinia'], // 自动导入vue和vue-router相关函数
        dts: './auto-import.d.ts' // 生成 `auto-import.d.ts` 全局声明（ts项目添加上）
    }),
  ],
}

3. 追加の設定項目

たとえば、eslintc に関連する設定

antfu/unplugin-auto-import: Vite、Webpack、Rollup のオンデマンド自動インポート API (github.com)