快捷導(dǎo)航

vue3中unplugin-auto-import自動(dòng)引入示例代碼

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

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

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中可以有很多配置項(xiàng)，可以到github中看詳細(xì)配置：

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

注：dts是幫我們生成的類(lèi)型聲明文件，直接使用會(huì)找不到

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

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

使用如下：

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

補(bǔ)充：unplugin-auto-import自動(dòng)導(dǎo)入TS2304警告問(wèn)題

1.前置配置

通過(guò)vite.config.js配置自動(dòng)導(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

此時(shí)代碼中編寫(xiě)時(shí)會(huì)遇到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" }]
}

總結(jié)

到此這篇關(guān)于vue3中unplugin-auto-import自動(dòng)引入的文章就介紹到這了,更多相關(guān)vue3的unplugin-auto-import自動(dòng)引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: