vue3中unplugin-auto-import自动引入示例代码

2023-02-07 09:55:41 作者：程序员小白Aven

unplugin-auto-import 这个插件是为了解决在开发中的导入问题,下面这篇文章主要给大家介绍了关于vue3中unplugin-auto-import自动引入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入

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自动引入内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue线上部署请求接口报错net::ERR_CONNECTION_REFUSED

Vue中 Runtime + Compiler 和 Runtime-only 两种模式含义和区别详解 — Vue中 Runtime + Compiler

工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终

电脑版 - 返回首页