Ручной импорт компонентов

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

Установка и подготовка

Для начала необходимо установить библиотеку через npm или yarn:

npm install element-plus
# или
yarn add element-plus

После установки можно подключать отдельные компоненты вручную. Это позволяет избежать автоматического подключения стилей и лишнего кода.

Импорт отдельных компонентов

Вместо глобального импорта через app.use(ElementPlus) каждый компонент можно импортировать по отдельности:

import { ElButton, ElInput } from 'element-plus';
import 'element-plus/es/components/button/style/css';
import 'element-plus/es/components/input/style/css';

export default {
  components: {
    ElButton,
    ElInput
  }
};

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

  • Импортируются только те компоненты, которые будут использованы.
  • Необходимо подключать стили отдельно, иначе компонент будет работать без оформления.
  • Такой подход сокращает размер итогового бандла.

Использование плагинов и функций Element Plus

Некоторые элементы, такие как уведомления, сообщения или загрузки, не требуют прямого добавления в components. Для них применяется ручной импорт функций:

import { ElMessage, ElNotification } from 'element-plus';
import 'element-plus/es/components/message/style/css';
import 'element-plus/es/components/notification/style/css';

ElMessage({
  message: 'Операция выполнена успешно',
  type: 'success',
});

ElNotification({
  title: 'Внимание',
  message: 'Произошло событие',
  type: 'warning',
});

Особенность: эти функции не добавляются в шаблон Vue, они вызываются напрямую через JS.

Организация импорта в отдельный модуль

Для больших проектов рекомендуется создавать файл-пакет компонентов, который централизует ручной импорт. Например:

// element-components.js
import { ElButton, ElSelect } from 'element-plus';
import 'element-plus/es/components/button/style/css';
import 'element-plus/es/components/select/style/css';

export default {
  install(app) {
    app.component('ElButton', ElButton);
    app.component('ElSelect', ElSelect);
  }
};

Подключение в основном приложении:

import { createApp } from 'vue';
import App from './App.vue';
import ElementComponents from './element-components';

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

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

Важные особенности ручного импорта

  1. Дерево зависимостей (tree-shaking) Ручной импорт полностью совместим с tree-shaking, что уменьшает размер итогового бандла и ускоряет загрузку.

  2. Стиль компонента Можно подключать CSS или SCSS. Например:

    import 'element-plus/es/components/button/style/index.scss';

  3. Совместимость с TypeScript Ручной импорт позволяет корректно использовать типы компонентов:

    import type { ButtonProps } from 'element-plus';

  4. Гибкость настройки Можно импортировать только функционал или только стили отдельно, что полезно для тонкой оптимизации.

Совмещение с автоматическим импортом

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

Пример сочетания:

import { ElMessage } from 'element-plus';
import 'element-plus/es/components/message/style/css';
// остальные компоненты импортируются автоматически через плагин

Подключение локальных тем и настроек

При ручном импорте возможно использовать локальные темы или кастомные SCSS-переменные для изменения стилей:

@use "element-plus/theme-chalk/src/button.scss" with (
  $--button-primary-background: #42b983,
  $--button-primary-color: #fff
);

Импорт компонентов при этом остаётся прежним, но внешний вид можно полностью адаптировать под дизайн приложения.

Практический пример

<template>
  <el-button type="primary" @click="notify">Нажми меня</el-button>
</template>

<script>
import { ElButton, ElNotification } from 'element-plus';
import 'element-plus/es/components/button/style/css';
import 'element-plus/es/components/notification/style/css';

export default {
  components: { ElButton },
  methods: {
    notify() {
      ElNotification({
        title: 'Привет',
        message: 'Это уведомление Element Plus',
        type: 'success'
      });
    }
  }
};
</script>

Ручной импорт позволяет оставаться максимально точным в выборе компонентов, уменьшает размер бандла и обеспечивает простую настройку внешнего вида и функционала.

Оглавление