自动导入

作者:Yuan Tang

更新于:9 个月前

字数统计:269 字

阅读时长:1 分钟

项目中 vue 的方法（如 ref 、onMounted 等）多个页面组件都需要使用，频繁 import 导入任务繁琐单调，重复没必要的事。通过第三方库实现 vue 方法与自主封装的函数自动导入可以让开发事半功倍。

知识点指路：自动导入

unplugin-auto-import

下载依赖：

pnpm i unplugin-auto-import

在 vite.config.js 文件导入：

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

自动导入 vue 和 vue-router 方法：

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // auto-import内置vue、vue-router、react这些常见基本库的引入规则
        'vue',
        'vue-router',
      ]
    })
  ],
  // ...
})

保存运行后不再需要每个组件手动引入方法了。

unplugin-vue-components

下载依赖：

pnpm i unplugin-vue-components

在 vite.config.js 文件导入：

import AutoImport from 'unplugin-vue-components/vite'

自动导入子组件：

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // ...
    }),
    Components({
      dirs: [
        './src/components',
      ]
    })
  ],
  // ...
})

保存运行后不再需要手动引入子组件了。

Contributors

Yuan Tang