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>

vue3的unplugin-auto-import自动引入相关推荐

vscode import 自动引入文件路径
设置vscode import 自动引入文件路径在根目录下创建jsconfig.json文件配置文件,记得每次修改之后都要重新启动vscode,才能生效 {"compilerOption ...
IDEA: 自动优化导包 Auto Import
由于开发过程中有的同事依然使用的是Eclispe, 在使用IDEA的时候,引入无用包可能无法及时去除!这个功能完美解决这个问题! Auto Import 功能: 自动删除无用的包Import(未被引 ...
vue3使用unplugin-auto-import自动引入ref/reactive等
npm i unplugin-auto-import -D 配置文件vite.config.ts import vue from '@vitejs/plugin-vue'; // 引入插件 impor ...
IDEA 实用功能Auto Import：自动优化导包（自动删除、导入包）
JetBrains公司的intellij Idea堪称JAVA编程界的苹果,用户体验非常好下面介绍一下IDEA的一个能显著提升写代码效率的非常好用的功能设置-- Auto Import Auto I ...
idea jar包导入_IDEA 实用功能Auto Import：自动优化导包（自动删除、导入包）
下面介绍一下IDEA的一个能显著提升写代码效率的非常好用的功能设置-- Auto Import Auto Import的功能是可以帮助我们自动删除无用的包Import(未被引用),以及自动Import ...
IDEA 自动导入的配置（Auto import）
很多开发过 Java 的小朋友都有一个定义就是不导入 * 但 IDEA 自动导入的配置中的默认选项是通配符导入( wildcard imports). 在默认情况下,如果同一个包中的类导入超过 5 个 ...
js自动引入js,css_js中的css调查
js自动引入js,css Expedia Group Technology -软件 (EXPEDIA GROUP TECHNOLOGY - SOFTWARE) TLDR: Using a Gatsby ...
vue3输入框生成的时候自动获取焦点
vue3输入框生成的时候自动获取焦点前言当我们在做vue3的项目的时候,在对一些信息的修改的时候,需要双击或者点击按钮来进行操作,让数据变成输入框来进行修改数据,当输入框失去焦点的时候就进行保存, ...
element-plus 自动引入全局配置size、zIndex、locale
组件形式全局引入.自动引入.按需引入都可用目录一.自动引入全局配置二.全局引入全局配置三.坑总结一.自动引入全局配置 <script setup lang="ts" ...

vue3的unplugin-auto-import自动引入

vue3的unplugin-auto-import自动引入相关推荐

最新文章

热门文章