Vite плагины

Для использования Element Plus в проектах на Vite необходимо корректно настроить плагины, обеспечивающие автоматическую регистрацию компонентов, поддержку стилей и оптимизацию сборки. Element Plus поставляется с официальным плагином unplugin-vue-components, который упрощает подключение и снижает нагрузку на разработчика.

Установка необходимых пакетов

Для корректной работы потребуется установить следующие зависимости:

npm install element-plus
npm install -D unplugin-vue-components unplugin-auto-import
  • element-plus — основной пакет библиотеки UI-компонентов.
  • unplugin-vue-components — плагин для автоматической регистрации компонентов.
  • unplugin-auto-import — плагин для автоматического импорта функций, таких как ElMessage, ElLoading, и других утилит Element Plus.

Настройка vite.config.js

Для активации плагинов нужно изменить конфигурационный файл vite.config.js:

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
});

Ключевые моменты:

  • ElementPlusResolver() автоматически находит и регистрирует все используемые компоненты.
  • AutoImport позволяет использовать утилиты библиотеки без ручного импорта, например:
ElMessage({
  message: 'Компонент успешно загружен',
  type: 'success',
});

Подключение стилей

Element Plus поддерживает два подхода к стилям: полная загрузка и по компонентам.

Полная загрузка:

import 'element-plus/dist/index.css';
  • Подходит для быстрого прототипирования.
  • Увеличивает размер финального бандла.

Импорт стилей по компонентам через плагин

unplugin-vue-components в связке с ElementPlusResolver позволяет автоматически подтягивать CSS каждого компонента, что снижает размер сборки:

Components({
  resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
});

Опция importStyle: 'sass' позволяет использовать SCSS-переменные, обеспечивая полную кастомизацию темы.

Кастомизация темы через SCSS

Element Plus предоставляет набор SCSS-переменных для изменения цветов, размеров и отступов. Для интеграции с Vite:

  1. Создать файл variables.scss:
$--color-primary: #42b983;
$--font-size-base: 16px;
  1. Подключить его через vite.config.js:
import path from 'path';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.scss')}";`
      },
    },
  },
});
  • Все компоненты автоматически используют новые переменные без дополнительного импорта.

Оптимизация сборки

Vite позволяет минимизировать размер бандла Element Plus:

  • Использовать on-demand импорт компонентов через unplugin-vue-components.
  • Включить tree-shaking для утилит, импортируемых через unplugin-auto-import.
  • Настроить esbuild для минификации:
build: {
  minify: 'esbuild',
  rollupOptions: {
    output: {
      manualChunks: {
        'element-plus': ['element-plus']
      }
    }
  }
}
  • Это позволяет вынести Element Plus в отдельный чанк и ускоряет кэширование.

Примеры использования

Автоматическая регистрация компонентов

<template>
  <el-button type="primary">Нажми меня</el-button>
  <el-input placeholder="Введите текст"></el-input>
</template>
  • Нет необходимости вручную импортировать ElButton или ElInput.
  • Плагин сам подтянет компонент и его стили.

Использование утилит

import { ElMessage } from 'element-plus';

ElMessage.success('Данные успешно сохранены');
  • Благодаря AutoImport можно использовать ElMessage без ручного импорта в каждом файле.

Интеграция с TypeScript

Для корректного автокомплита в TypeScript рекомендуется добавить:

// shims-element-plus.d.ts
declare module 'element-plus';

И включить типы:

AutoImport({
  resolvers: [ElementPlusResolver()],
  dts: 'src/auto-imports.d.ts',
}),
Components({
  resolvers: [ElementPlusResolver()],
  dts: 'src/components.d.ts',
})
  • Генерируемые .d.ts файлы обеспечивают поддержку автокомплита и типизации компонентов.

Эта конфигурация обеспечивает полностью автоматизированное подключение Element Plus к проектам на Vite, включая поддержку SCSS, автокомплит и tree-shaking, что делает разработку быстрым и эффективным процессом.

Оглавление