unplugin-auto-import 的配置项翻译

使用过程中unplugin-auto-import顺手翻译一下,方便下次阅读

AutoImport({
  // 需要被转化的目标
  include: [
    /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
    /\.vue$/,
    /\.vue\?vue/, // .vue
    /\.md$/, // .md
  ],

  // 需要全局引入的
  imports: [
    // 预设
    'vue',
    'vue-router',
    // 自定义
    {
      '@vueuse/core': [
        // named imports
        'useMouse', // import { useMouse } from '@vueuse/core',
        // alias
        ['useFetch', 'useMyFetch'], // import { useFetch as useMyFetch } from '@vueuse/core',
      ],
      'axios': [
        // default imports
        ['default', 'axios'], // import { default as axios } from 'axios',
      ],
      '[package-name]': [
        '[import-names]',
        // alias
        ['[from]', '[alias]'],
      ],
    },
    // 引入类型
    {
      from: 'vue-router',
      imports: ['RouteLocationRaw'],
      type: true,
    },
  ],

  // 需要忽略掉的数组.
  ignore: [
    'useMouse',
    'useFetch'
  ],

  // 开启默认导出模块(export default)通过文件名自动导入
  defaultExportByFilename: false,

  // 自动导入的目录,默认只扫描一层
  dirs: [
    // './hooks',
    // './composables' // only root modules
    // './composables/**', // all nested modules
    // ...
  ],

  // 生成ts类型文件的路径.
  // 如果本地安装了 ts, 默认是 './auto-imports.d.ts' 
  // 设置成 `false` 关闭.
  dts: './auto-imports.d.ts',

  // 需要忽略自动生成声明文件的数组,当你需要提供一个自定义的函数签名时很有用
  ignoreDts: [
    'ignoredFunction',
    /^ignore_/
  ],

  // vue 模板内自动导入
  // see https://github.com/unjs/unimport/pull/15 and https://github.com/unjs/unimport/pull/72
  vueTemplate: false,

  // 自定义 resolvers, 与 `unplugin-vue-components`一致
  // see https://github.com/antfu/unplugin-auto-import/pull/23/
  resolvers: [
    /* ... */
  ],

  // 将导入注入到其他导入的末尾
  injectAtEnd: true,

  // 生成相应的 .eslintrc-auto-import.json 文件.
  // eslint globals Docs - https://eslint.org/docs/user-guide/configuring/language-options#specifying-globals
  eslintrc: {
    enabled: false, // Default `false`
    filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
    globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
  },
})
  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
unplugin-auto-import 是一个非常实用的插件,它可以帮助我们自动引入模块。下面是一份 unplugin-auto-import配置示例: ```js // vite.config.js import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import AutoImport from 'unplugin-auto-import/vite'; export default defineConfig({ plugins: [ vue(), AutoImport({ // 需要自动引入的模块列表 imports: [ 'vue', 'vuex', 'vue-router', { // 带有命名空间的模块 libraryName: 'element-plus', // 模块的默认导出 resolveComponent: name => `element-plus/lib/${name}`, // 模块中的具名导出 resolveStyle: name => `element-plus/lib/theme-chalk/${name}.css`, }, ], }), ], }); ``` 在上面的代码中,我们使用了 unplugin-auto-import 的 `AutoImport` 插件,并且在插件的配置中指定了需要自动引入的模块列表。其中,`imports` 属性接受一个数组,数组中可以包含字符串或对象。如果是字符串,则表示需要自动引入的模块名;如果是对象,则可以指定模块的命名空间、默认导出和具名导出等信息。 在配置完成后,我们可以在代码中直接使用需要自动引入的模块,unplugin-auto-import 会自动帮我们引入相关的模块。比如,在 Vue 组件中使用 Element Plus 的 `el-button` 组件: ```vue <template> <el-button>Click me</el-button> </template> <script> export default { name: 'MyComponent', methods: { handleClick() { // ... }, }, }; </script> <style> /* unplugin-auto-import 会自动引入 element-plus/lib/theme-chalk/el-button.css */ </style> ``` 除了在 Vite 中使用,unplugin-auto-import 还支持在其他构建工具中使用,比如 webpack、Rollup 等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值