vue3中unplugin-auto-import自動引入示例代碼

更新時間：2023年02月07日 10:00:05 作者：程序員小白Aven

unplugin-auto-import 這個插件是為了解決在開發(fā)中的導(dǎo)入問題,下面這篇文章主要給大家介紹了關(guān)于vue3中unplugin-auto-import自動引入的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1、安裝

npm i -D unplugin-auto-import

2、在vite.config.ts中引入

import AutoImport from 'unplugin-auto-import/vite'

并在plugins中配置：

export default defineConfig({
        plugins: [
            ......
            AutoImport({  
              imports: ['vue'],
              dts: 'src/auto-import.d.ts',
            })
        ]
}）

AutoImport中可以有很多配置項，可以到github中看詳細配置：

GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup

注：dts是幫我們生成的類型聲明文件，直接使用會找不到

上面配置完畢后會在src目錄下生成一個auto-import.d.ts文件，里面幫我們自動引入vue相關(guān)內(nèi)容，我們可以在項目中直接使用。

注意：上面配置完畢dts后可能并不會自動生成auto-import.d.ts文件，可以重新運行一下項目，或者關(guān)閉編輯器重新打開運行即可。

使用如下：

<script setup lang="ts">
  // 這里我們不用引入ref直接使用
  const msg = ref<string>('Hello Vue3')
</script>
 
<template>
  {{ msg }}
</template>
 
<style scoped lang="scss"></style>

補充：unplugin-auto-import自動導(dǎo)入TS2304警告問題

1.前置配置

通過vite.config.js配置自動導(dǎo)入API

export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
			imports: ['vue', 'vue-router', 'pinia'],
			eslintrc: {
				enabled: false,
				filepath: './.eslintrc-auto-import.json',
				globalsPropValue: true,
			},
		})
	]
})

生成文件：auto-imports.d.ts

2. TS2304

此時代碼中編寫時會遇到TS的警告。Cannot find name 'ref'.ts(2304)

3.解決方案

ts.config.json文件引入聲明文件: include中引入auto-imports.d.ts

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts" // 此處引入該聲明文件
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}