vue3 开发利器——unplugin-auto-import

这玩意儿是干啥的?

还记得 Vue 3 的组合式 API 语法吗?如果有印象,那你肯定对以下代码有着刻入 DNA 般的熟悉:

刚开始写觉得没什么,但是后来渐渐发现,这玩意儿几乎每个页面都有啊!

每次都要写,哪怕是复制粘贴都会非常繁琐。并且每一个 <script setup> 下面都顶着一大坨 import,看着也十分难受。

本文介绍的 unplugin-auto-import 就是为了解决这个问题而诞生的。

unplugin-auto-import 官方简介:

为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。由 unplugin 提供技术支持。

安装:

javascript 复制代码
// 安装unplugin-auto-import
npm install unplugin-auto-import -D

vite.config.js

javascript 复制代码
// vite.config.js 配置文件
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
 
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],
});

使用

javascript 复制代码
// 现在你可以在任何组件中直接使用Vue的功能,例如:
// 不需要import { ref } from 'vue'
const count = ref(0);
相关推荐
EMT33 分钟前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安42 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多1 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户516816614584118 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦18 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He18 小时前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js