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

Для начала работы с Element Plus в проекте на Vite необходимо создать новый проект и установить все зависимости. Команда для инициализации проекта:

npm create vite@latest my-element-plus-app
cd my-element-plus-app
npm install

Далее устанавливаются Element Plus и необходимые зависимости:

npm install element-plus

Если используется Vue 3 (что актуально для Vite), можно сразу интегрировать Element Plus глобально или локально в компонентах.

Глобальная регистрация компонентов

Чтобы использовать все компоненты библиотеки без повторного импорта, можно настроить глобальную регистрацию в main.js или main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

В таком случае компоненты Element Plus будут доступны во всех шаблонах без локального импорта.

Преимущества глобальной регистрации:

  • Упрощает использование компонентов в больших проектах.
  • Не требует постоянного импорта каждого компонента.

Недостатки:

  • Увеличивает размер итогового бандла, если используются только отдельные компоненты.

Локальная регистрация компонентов

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

import { ElButton, ElDialog } from 'element-plus'
import 'element-plus/dist/index.css'

export default {
  components: {
    ElButton,
    ElDialog
  }
}

Такой подход позволяет уменьшить размер сборки и ускорить загрузку страниц.

Настройка автоматического импорта

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

npm install -D unplugin-vue-components

В vite.config.js:

import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default {
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

Теперь компоненты Element Plus можно использовать в шаблонах без явного импорта, а Vite автоматически добавит нужные импорты при сборке.

Темизация и настройка стилей

Element Plus поддерживает кастомизацию тем через SCSS переменные. Для проекта на Vite можно создать файл element-variables.scss:

$--color-primary: #409eff;
$--font-size-base: 14px;

И импортировать его перед глобальными стилями библиотеки:

import 'element-plus/theme-chalk/src/index.scss'
import './element-variables.scss'

Это позволяет изменять цвета, размеры и другие параметры без редактирования исходных стилей.

Подключение иконок

Element Plus предоставляет отдельный пакет иконок:

npm install @element-plus/icons-vue

Использование в компоненте:

import { User } from '@element-plus/icons-vue'

export default {
  components: {
    User
  }
}

Иконки могут использоваться напрямую в шаблоне через <User />.

Настройка локализации

Для изменения языка интерфейса необходимо подключить локаль:

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

const app = createApp(App)
app.use(ElementPlus, { locale: zhCn })
app.mount('#app')

Поддерживаются различные языки: английский, китайский, японский, испанский и др.

Использование с Vite HMR

Vite поддерживает Hot Module Replacement (HMR), что позволяет моментально видеть изменения компонентов Element Plus без перезагрузки страницы. Для корректной работы:

  • Убедиться, что компоненты импортируются через ES модули.
  • Использовать <script setup> синтаксис для Vue 3.
  • В случае использования SCSS с темами – убедиться, что все переменные подключены через @use или @import.

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

Для уменьшения размера бандла рекомендуется:

  • Импортировать только необходимые компоненты (ElButton, ElTable и т.д.).
  • Использовать unplugin-vue-components с ElementPlusResolver.
  • Включить минификацию CSS и JS через Vite (build.minify = 'esbuild' или 'terser').
  • Разделять большие страницы на ленивые модули с динамическим импортом компонентов.

Работа с TypeScript

Element Plus полностью поддерживает TypeScript. Для корректной типизации компонентов:

  1. Установить типы Vue 3:
npm install -D @types/node
  1. В tsconfig.json добавить:
{
  "compilerOptions": {
    "types": ["element-plus/global"]
  }
}
  1. При использовании локальной регистрации компонента TypeScript автоматически подсказывает доступные пропсы, события и слоты.

Сборка для продакшена

Vite позволяет быстро собирать проект с Element Plus:

npm run build

Результатом станет оптимизированный бандл, минимизированный CSS и JS, а также подготовленные для деплоя HTML и ассеты. При этом все локальные и глобальные компоненты сохраняют функциональность, включая иконки, локализацию и кастомные темы.

Эти настройки обеспечивают полную интеграцию Element Plus с современным инструментом сборки Vite, включая оптимизацию бандла, поддержку TypeScript и кастомизацию интерфейса.

Оглавление