Vue uni-app免手动import

unplugin-auto-import 是一个流行的 JavaScript/TypeScript 插件，可以自动导入常用的库、API 或自定义函数，减少手动书写 import 语句的繁琐操作。它常用于 Vue、React 等框架，帮助开发者提高效率和减少样板代码。

核心功能：

1. 自动导入：
   • 无需手动编写 import 语句，代码中直接使用目标函数或 API 即可。
2. 高度自定义：
   • 可以根据项目需求指定需要自动导入的库、API 或函数。
3. 支持 Tree-Shaking：
   • 未使用的导入会在构建过程中自动移除，确保最终打包体积最小化。
4. 框架无关：
   • 适用于 Vue、React 或纯 JavaScript/TypeScript 项目。
5. TypeScript 支持：
   • 自动生成类型声明文件，提供更好的类型检查和开发体验。

在 Vue 项目中的使用示例

1. 安装插件：

npm install -D unplugin-auto-import

2. 在 vite.config.ts 中配置：

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue', // 自动导入 Vue 的 API，比如 ref、reactive 等
        'vue-router', // 自动导入 Vue Router 的方法
        'uni-app'
      ],
      dts: 'src/auto-imports.d.ts', // 生成类型声明文件
    }),
  ],
})

3. 无需手动导入： 配置完成后，可以直接在代码中使用函数，无需显式导入:

<script setup>
const count = ref(0)

const increment = () => {
  count.value++
}
</script>

4. 生成的类型声明文件： 配置中的 dts 文件会自动生成对应的类型定义，确保在 TypeScript 项目中也能获得自动补全和类型检查功能。

优势：

• 节省时间： 不需要重复书写导入语句。
• 减少错误： 不会因为忘记导入某些函数而报错。
• 代码更简洁： 专注于逻辑实现，避免大量样板代码。