Complemento del proyecto Vite

 1. unplugin-vue-components  importa componentes automáticamente

      1.1 Instalación

npm install unplugin-vue-components -D

      1.2 Importe automáticamente la biblioteca ui, el complemento tiene incorporados los analizadores de biblioteca más populares  Element Plus  Ant Design Vue  Vant  Element UI  Headless UI 

// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver,
  VantResolver,
  AntDesignVueResolver,
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      //导入自己的组件 指定组件位置，默认是src/components
      dirs: ['src/components', 'src/views'],
      // ui解析库
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver(),
      ],
      //配置文件生成位置, 插件会生成一个自己组件路径的components.d.ts文件
      dts: 'src/components.d.ts'
      // 其他配置
      // ...
    })
  ]
})

2. unplugin-auto-import/vite  importa automáticamente ganchos de vue3

2.1 instalación

npm i -D unplugin-auto-import

2.2 Configuración, generada en el directorio raíz por defectoauto-imports.d.ts文件，并将其添加到tsconfig.json include中

// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      //自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue', 'vue-router', 'vue-i18n', '@vueuse/head', '@vueuse/core'],
      eslintrc: {
        // 默认 false, 生成一次即可，避免每次工程启动都生成，一旦生成配置文件之后，改成 false。
        // 否则这个文件每次会在重新加载的时候重新生成，这会导致 eslint 有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
        enabled: false,
        // 默认就是 ./.eslintrc-auto-import.json
        // filepath: './.eslintrc-auto-import.json', 
        // globalsPropValue: true, // 默认 true
      },
      // auto-import.d.ts生成的位置，默认在根目录生成
      // dts: 'src/auto-import.d.ts'
    })
  ]
})

Si se usa la regla de verificación de eslint, se informará un error de eslint en el archivo vue: 'ref' no está definido

Luego: configúrelo  eslintrc.enabled como verdadero, reinicie el proyecto para generar  .eslintrc-auto-import.json archivos (el navegador debe visitar todas las páginas aplicadas a vue/element api para generar todos los archivos json que importan automáticamente api), y cámbielo a falso después de la generación. Finalmente,  .eslintrc.js introduce el json generado en el archivo extends

3. vite-plugin-style-import   importa estilos de biblioteca de componentes a pedido

3.1 Instalación

npm install vite-plugin-style-important -D

3.2 configuración

// vite.config.js
import { defineConfig } from 'vite'
import styleImport, {
  AndDesignVueResolve,
  VantResolve,
  ElementPlusResolve,
} from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    styleImport({
      resolves: [
        AndDesignVueResolve(),
        VantResolve(),
        ElementPlusResolve(),
      ],
      // 自定义规则
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          }
        }
      ]
    })
  ],
  // 引用使用less的库要配置一下
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
})

4, vite-plugin-svg-iconos

5、vite-plugin-monkey