在vue中重复组件导入简化方案

重复组件导入简化

在 Vue 3 项目中，如果你发现每个组件都要重复导入 api 和 utils，是可以通过几种方式简化甚至完全避免这些重复导入的。下面是常用的几种简化方案：

✅ 方案一：使用 app.config.globalProperties 注入全局属性

这是最常见的做法，可以在 main.ts 或 main.js 中将 api 和 utils 挂载到 app.config.globalProperties 上，使其在所有组件中通过 this.$api和this.$utils 直接访问（仅限于 Options API）。

示例：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import api from '@/api'
import utils from '@/utils'

const app = createApp(App)

app.config.globalProperties.$api = api
app.config.globalProperties.$utils = utils

app.mount('#app')

使用（Options API 中）：

<script>
export default {
  mounted() {
    this.$api.getData()
    const formatted = this.$utils.formatDate(new Date())
  }
}
</script>

✅ 方案二：使用 Vue 插件封装并自动注入

你可以把 api 和 utils 封装成一个插件，一次性注册。

plugins/global-inject.ts：

export default {
  install(app) {
    app.config.globalProperties.$api = require('@/api').default
    app.config.globalProperties.$utils = require('@/utils').default
  }
}

在 main.ts 中使用

import globalInject from './plugins/global-inject'
app.use(globalInject)

✅ 方案三：使用 Vite / Webpack 的路径别名 + 全局 Auto Import（组合式 API 推荐）

如果你使用的是 组合式 API（setup），this.$api 是不可用的，但你可以使用自动导入（借助插件）

配置 unplugin-auto-import

使用 Vite 项目的话，可以借助unplugin-auto-import：

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

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        // 自动导入 Vue 相关 API
        'vue',
        {
          '@/api': [['default', 'api']],
          '@/utils': [['default', 'utils']],
        }
      ],
      dts: 'src/auto-imports.d.ts',
    })
  ]
})

使用（setup 中无须导入）：

setup() {
  api.getUser()
  const formatted = utils.formatDate(new Date())
}

✅ 方案四：封装 Composition API 方法

如果 api 和utils 有非常常用的方法，也可以封装成组合式函数，如

// composables/useApi.ts
import api from '@/api'
export function useApi() {
  return api
}

// composables/useUtils.ts
import utils from '@/utils'
export function useUtils() {
  return utils
}

然后在组件里：

import { useApi, useUtils } from '@/composables'

setup() {
  const api = useApi()
  const utils = useUtils()
  api.getData()
}

✅ 总结

方法	优点	使用场景	支持 Options API	支持 Setup API
app.config.globalProperties	简单、常用	Options API 项目	✅	❌
插件注入	模块化清晰	中大型项目	✅	❌
自动导入插件	零导入体验	现代组合式项目（Vite）	❌	✅
封装 composables	更符合组合式风格	通用	✅（手动引入）	✅