vue3+vite引入插件unplugin-auto-import的方法

更新时间：2022年10月14日 09:39:09 作者：啊咧咧呀

这篇文章主要介绍了vue3+vite引入插件unplugin-auto-import的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下

自动引入 composition api，不需要再手动引入。
github地址：https://github.com/antfu/unplugin-auto-import

下载

npm i unplugin-auto-import -D

修改vite.config.ts文件

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

配置完毕后保存，此时会自动生成一个 auto-import.d.ts 的文件

现在我们可以在项目中写入代码，可以看到我们没有手动引入 ref 也可以在项目中正常使用。

<template>
    <div>
        <button @click="flag = !flag">change flag</button>
        <div>{{ flag }}</div>
    </div>
</template>
 
<script setup lang="ts">
const flag = ref(false);
</script>
 
<style lang="less"></style>

到此这篇关于vue3+vite引入插件unplugin-auto-import的文章就介绍到这了,更多相关vue3引入插件unplugin-auto-import内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3中如何检测数组的变化方式
这篇文章主要介绍了Vue3中如何检测数组的变化方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-06-06
vue实现PC端分辨率适配操作
这篇文章主要介绍了vue实现PC端分辨率适配操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue单向数据流的深入理解
随着前端的项目的越来越复杂,出现了一堆概念来降低开发的复杂性,单向数据流就是其中一个,下面这篇文章主要给大家介绍了关于vue单向数据流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-01-01
Vue模板中保留HTML注释的方法大全
在 Vue 开发中,我们经常需要在模板中添加注释,但是,你可能会发现 Vue 默认会移除模板中的所有 HTML 注释,今天我们就来深入探讨如何在 Vue 中保留这些有价值的注释,需要的朋友可以参考下
2026-01-01
vue中的rules表单校验规则使用方法示例详解 :rules=“rules“
这篇文章主要介绍了vue中的rules表单校验规则使用方法示例详解 :rules=“rules“,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-11-11
修改Vue打包后的默认文件名操作
这篇文章主要介绍了修改Vue打包后的默认文件名操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
UniApp加载Web页面完整实现方案(附实例代码)
在uniapp中加载外部网页,可以通过使用web-view组件来实现,web-view是一个web浏览器组件,可以用来承载网页的容器,这篇文章主要介绍了UniApp加载Web页面完整实现方案的相关资料,需要的朋友可以参考下
2025-09-09
vue el-input设置必填提示功能(单个与多个)
有的功能需要设置必填项,当然也需要判断是不是添上了,下面这篇文章主要给大家介绍了关于vue el-input设置必填提示功能(单个与多个)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vue3+Vite 环境变量和模式配置详解(推荐)
在Vue 3中,你可以通过 import.meta.env 访问环境变量,这些变量可以在你的应用代码中使用,但它们通常用于配置不应该硬编码在代码中的值,这篇文章主要介绍了Vue3+Vite 环境变量和模式配置详解,需要的朋友可以参考下
2024-12-12
详解vite2.0配置学习(typescript版本)
这篇文章主要介绍了详解vite2.0配置学习(typescript版本)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02