前端工程化之自动引入

为了减少项目中常用的api以及组件多次引用的问题，通过vite插件进行自动引入，无需在每个组件重复import

pnpm add unplugin-auto-import unplugin-vue-components -D

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { resolve } from 'path';
import checker from 'vite-plugin-checker';
import WindiCSS from 'vite-plugin-windicss';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    WindiCSS(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      resolvers: [ElementPlusResolver()],
      dts: './src/auto-imports.d.ts',
      eslintrc: {
        enabled: true
      }
    }),
    Components({ resolvers: [ElementPlusResolver()] }),
    checker({
      // vueTsc: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts,tsx,vue,js,jsx}"'
      }
    })
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
});

存在的问题

此时项目中直接使用ref或者未引入的api可能eslint仍会报错 在.eslintrc.cjs中extends添加刚保存vite.config.ts自动生成的.eslintrc-auto-import.json文件

extends: ['alloy', 'alloy/vue', 'alloy/typescript','./.eslintrc-auto-import'],

若自动生成的 components.d.ts 文件内容有报错

Components({resolvers: [ElementPlusResolver()],// 新增如下dts: 'src/components.d.ts'
}),