Vue uni-app免手动import

kay5352025-01-18 9:08

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

核心功能：

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

在 Vue 项目中的使用示例

安装插件：

bash 复制代码

npm install -D unplugin-auto-import

在 vite.config.ts 中配置：

typescript 复制代码

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', // 生成类型声明文件
    }),
  ],
})

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

html 复制代码

<script setup>
const count = ref(0)

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

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

优势：

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