Vue3中使用unplugin-auto-import / unplugin-vue-components

1. unplugin-auto-import的使用

安装unplugin-auto-import插件

npm install unplugin-auto-import -D

vue.config.js配置自动导入API插件

const AutoImport = require('unplugin-auto-import/webpack').default;
const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
 configureWebpack: {
    plugins: [
      AutoImport({
        imports: [
           // auto-import插件内置了vue vue-router, react这些常见基本库的引入规则
          'vue',
          {
            // 放入我们自定义的自动引入库
            lodash: [
              // import { cloneDeep } from 'lodash'
              'cloneDeep',
              // import { isEmpty as Empty } from 'lodash'
              ['isEmpty', 'Empty']

            ],
            axios: [
              // import { default as axios } from 'axios'
              ['default', 'axios']
            ]
          }
        ],
        // 生成相应`.d.ts`文件的文件路径。默认为“”/在本地安装“typescript”时自动导入.d.ts。
        dts: './src/types/auto-import.d.ts',
        vueTemplate: true,
        eslintrc: {
          enabled: true,
        },
      })
    ]
  },
})

2. unplugin-vue-components的使用

安装unplugin-vue-components插件

npm install unplugin-vue-components -D

vue.config.js配置自动导入组件插件

const { defineConfig } = require('@vue/cli-service')
const AutoComponents = require('unplugin-vue-components/webpack').default
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
const path = require('path')
module.exports = defineConfig({
  configureWebpack: {
    plugins: [
      AutoComponents({
        // vue-components 内置了前端主流的resolve element antd等
        resolvers: [ElementPlusResolver()],
        // 生成目录文件
        dts: './src/types/components.d.ts',
        // 组件名称 包含目录 ，防止命名冲突
        directoryAsNamespace: true,
      })
    ]
  }
})