vue3中使用プラグインunplugin-auto-import/vite

2023年7月22日366

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

"自动导入"是一个npm包，可以通过npm i -D unplugin-auto-import进行安装。在vite.config.ts文件中进行配置，导入vue插件和AutoImport插件，并设置dts为true。配置完成后，会在当前路径生成一个auto-imports.d.ts文件。在tsconfig.json文件中也需要进行配置，以防止vue文件中出现红线。最后，代码中使用了一个变量num，并通过{{ num }}进行展示。

自動インポート

インストール#

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>