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);
相关推荐
独立开阀者_FwtCoder11 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者14 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder14 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder15 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
rui锐rui1 小时前
商品销售数据分析实验
vue.js·数据挖掘·数据分析
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
Jokerator1 小时前
Vue 2现代模式打包:双包架构下的性能突围战
javascript·vue.js
洛小豆2 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
前端wchen2 小时前
Vue 3 组件通信实战系列(一)父子组件通信的标准姿势:Props 与 Emit(含实战与进阶技巧)
前端·vue.js
程序员秘密基地3 小时前
基于html,css,vue,vscode,vs2022,asp.net,aspnet,.net,c#,mysql数据库,在线健身,俱乐部管理系统
前端·vue.js·后端·mysql·asp.net