在Vue3中使用插件unplugin-auto-import/vite

Automatic Import

Installation#

npm i -D unplugin-auto-import

Configuration#

Configure in vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
      dts: true,
    }),
  ],
});

After setting dts:true, a auto-imports.d.ts file will be generated in the current path.

Note: You can also specify a path.

Configure in tsconfig.json

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./**.d.ts"   *****This line
],

The purpose of this configuration is to prevent red lines in vue files, although it does not affect the operation.

Effect#

<template>
  <div>
    <button @click="num += 1">+</button>
  </div>
  <div>
    {{ num }}
  </div>
</template>

<script setup lang="ts">

const num = ref(30);

</script>