vue3中使用插件unplugin-auto-import/vite

2023年7月22日359

AI 生成的摘要

自动导入是一个用于Vite项目的插件，可以自动导入所需的模块。安装该插件后，在vite.config.ts文件中进行配置，设置imports为需要导入的模块，设置dts为true可以生成一个auto-imports.d.ts文件。在tsconfig.json文件中也需要进行配置，以防止在vue文件中出现错误提示。使用该插件后，可以在代码中直接使用导入的模块，并展示效果。

自动导入

安装#

npm i -D unplugin-auto-import

配置#

在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,
    }),
  ],
});

设置dts:true之后，会在当前路径生成一个auto-imports.d.ts文件

注：也可以指定路径

在tsconfig.json中配置

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./**.d.ts"   *****这一行
],

配置的目的是防止 vue 文件中报红线，虽然不影响运行

效果#

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

<script setup lang="ts">

const num = ref(30);

</script>