模块自动导入工具 unplugin-auto-import

1 篇文章 0 订阅
1 篇文章 0 订阅

今天介绍一款开发时能自动导入模块的工具,他就是 unplugin-auto-import 。 以Vue2为例。

安装如下:

npm i -D unplugin-auto-import

然后进入页面在更目录下面创建一个vue.config.js文件。

打开vue.config.js文件之后添加一个自动引入axios,代码如下写:

const VueComponents = require('unplugin-vue-components/webpack');


module.exports = {
  configureWebpack: {
    imports:["axios"]
  },
}

如果是vite 就把unplugin-vue-components/webpack 改为unplugin-vue-components/vite ,他是有提示的。下面是官方给的案例。

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})


// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack')({ /* options */ }),
  ],
}



// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({ /* options */ }),
    ],
  },
}


/ rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup'

export default {
  plugins: [
    AutoImport({ /* options */ }),
    // other plugins
  ],
}


/ rspack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/rspack')({ /* options */ }),
  ],
}


/ quasar.conf.js [Vite]
module.exports = {
  vitePlugins: [
    ['unplugin-auto-import/vite', { /* options */ }],
  ],
}

// quasar.conf.js [Webpack]
const AutoImportPlugin = require('unplugin-auto-import/webpack')

module.exports = {
  build: {
    chainWebpack(chain) {
      chain.plugin('unplugin-auto-import').use(
        AutoImportPlugin({ /* options */ }),
      )
    },
  },
}

// esbuild.config.js
import { build } from 'esbuild'

build({
  /* ... */
  plugins: [
    require('unplugin-auto-import/esbuild')({
      /* options */
    }),
  ],
})


// astro.config.mjs
import AutoImport from 'unplugin-auto-import/astro'

export default defineConfig({
  integrations: [
    AutoImport({
      /* options */
    })
  ],
})

网址:https://github.com/unplugin/unplugin-auto-import#install

然后我们页面的axios就可以删除掉了,不需要引入。

然后介绍一下这个插件的几个属性

  1. include:

    • 用途:指定哪些文件或目录应被插件处理。
    • 场景:当你只想在特定的目录或文件中自动导入组件时使用,例如只处理 src/views 或仅处理匹配 *.vue 的文件。
  2. imports:

    • 用途:手动指定要自动导入的库或模块。
    • 场景:例如,你可以指定 element-ui,这样当你在模板中使用 <el-button>,插件会自动为你导入对应的组件。
  3. dirs:

    • 用途:指定哪些目录下的 Vue 组件应该被自动解析和导入。
    • 场景:在你有一个 src/components 目录,其中包含所有的 Vue 组件,并希望所有这些组件都能自动导入的情况下使用。
  4. dts:

    • 用途:为自动导入的组件生成 TypeScript 定义文件。
    • 场景:当你在使用 TypeScript,并希望为自动导入的组件获得类型提示和校验时使用。只有用到TS就一定需要这个。
  5. resolvers:

    • 用途:定义自定义的解析器或使用插件提供的预设解析器来确定如何解析组件名称和它们的导入路径。
    • 场景:例如,当你使用第三方 UI 库,如 Vant,并希望自动导入它的组件时,可以使用 VantResolver
  6. eslintrc:

    • 用途:这不是 unplugin-vue-components 的直接配置项。但在使用此插件时,由于组件是自动导入的,你可能需要更新 ESLint 配置以防止“未定义”或“未使用”等错误。
    • 场景:例如,使用 eslint-plugin-import 插件的 no-unresolved 规则可能会对自动导入的组件报错。你可能需要调整或禁用某些 ESLint 规则来适应自动导入的行为

以上就是unplugin-auto-import插件使用了,更多请去官方文档查看。github地址:https://github.com/unplugin/unplugin-auto-import#install

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值