vue3中unplugin-auto-import自动引入示例代码
作者：程序员小白Aven
unplugin-auto-import 这个插件是为了解决在开发中的导入问题,下面这篇文章主要给大家介绍了关于vue3中unplugin-auto-import自动引入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入
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相关内容，我们可以在项目中直接使用。
注意：上面配置完毕dts后可能并不会自动生成auto-import.d.ts文件，可以重新运行一下项目，或者关闭编辑器重新打开运行即可。
使用如下：
<script setup lang="ts">
// 这里我们不用引入ref直接使用
const msg = ref<string>('Hello Vue3')
</script>
<template>
{{ msg }}
</template>
<style scoped lang="scss"></style>补充：unplugin-auto-import自动导入TS2304警告问题
1.前置配置
通过vite.config.js配置自动导入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" }]
}
总结
到此这篇关于vue3中unplugin-auto-import自动引入的文章就介绍到这了,更多相关vue3的unplugin-auto-import自动引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！