全民绳索营救小游戏
115.23MB · 2025-10-21
点赞 + 收藏 === 学会???
unplugin-auto-import：为 Vite、Webpack、Rollup 设计的按需自动导入 API 的强大工具
在日常前端开发中，我们经常遇到以下困扰：
采用 库实现按需自动导入所需 API。该方案可让项目全局感知使用位置，开发者只需直接使用相关函数和组件，无需手动导入。
首先安装相关依赖包：
npm install dayjs lodash-es element-plus npm install unplugin-auto-import -D
创建一个独立的 TypeScript 文件作为中转导出（解决类型丢失问题，）：
// @/utils/lib-export.tsimport dayjs from "dayjs";import { ElMessage, ElMessageBox, ElLoading, ElButton } from "element-plus";import { keyBy, cloneDeep, isNil } from "lodash-es";export { dayjs, ElMessage, ElMessageBox, ElLoading, ElButton, keyBy, cloneDeep, isNil };
在 vite.config.ts 中添加以下配置：
AutoImport({ vueTemplate: true, // 注意：此选项必须开启，否则 .vue 模板中将检测不到自动导入（文档默认关闭） imports: [ "vue", "vue-router", { "@/utils/lib-export": [ ["dayjs"], ["ElMessage"], ["ElMessageBox"], ["ElLoading"], ["ElButton"], ["keyBy"], ["cloneDeep"], ["isNil"] ], }, ],}),
将自动生成的类型声明文件添加到 TypeScript 配置中：auto-imports.d.ts
// tsconfig.app.json{ "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts"]}
同理，我们也可以将自定义的枚举或函数注入到全局。以枚举为例：
// @/enums/sex-enum.tsexport enum SexEnum { Man, Woman, Unknown,}
imports: [ 'vue', 'vue-router', { '@/enums/sex-enum': [['SexEnum']], },],在没有 unplugin-auto-import 这个插件（由 Anthony Fu 开发）之前，Vue2 项目中通常采用以下方式：
Vue.prototype 上，通过 this 访问window 对象上这些方式存在明显缺点：
declare 声明文件使用 unplugin-auto-import 后的优势：
这是一个简单但功能强大的配置方案，可以极大地提升前端开发体验和效率。它适用于各种规模的 Vue、React 或其他前端项目，你可以根据项目需求灵活调整需要自动导入的内容。
? 希望这个小技巧能帮助大家提高工作效率，早点下班，永不加班！
2025-10-21
冲击小米 SU7 Ultra 纪录：保时捷最速四门轿车 Panamera Turbo GT 曝光，V8 引擎、预估 800 马力
2025-10-21
《原神》6.1复刻角色一览
