Архитектура приложения

Компонентная структура

Element Plus — это библиотека компонентов для Vue 3, ориентированная на создание интерфейсов с высокой степенью повторного использования. Архитектура приложения с Element Plus строится вокруг компонентного подхода, где каждый визуальный элемент интерфейса реализован как отдельный Vue-компонент.

Ключевые аспекты:

  • Изоляция логики и шаблонов: каждый компонент содержит собственный шаблон (<template>), скрипт (<script setup>) и стили (<style scoped>).
  • Повторное использование: компоненты могут быть использованы многократно, передавая данные через props и получая события через emits.
  • Композиция компонентов: сложные интерфейсы строятся из комбинации базовых элементов Element Plus, таких как ElButton, ElTable, ElForm и т.д.
<template>
  <el-form :model="formData">
    <el-form-item label="Имя">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-button type="primary" @click="submitForm">Отправить</el-button>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';

const formData = ref({ name: '' });

function submitForm() {
  console.log(formData.value);
}
</script>

Интеграция глобальных компонентов

Element Plus позволяет регистрировать компоненты глобально, что упрощает использование их в различных частях приложения без повторного импорта. Глобальная регистрация выполняется в основном файле приложения (main.js или main.ts):

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

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

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

  • Ускоряет разработку за счет отсутствия необходимости локального импорта каждого компонента.
  • Обеспечивает единообразный стиль интерфейса через темы Element Plus.

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

Для более точного контроля можно регистрировать компоненты локально внутри конкретного компонента Vue:

<script setup>
import { ElButton, ElInput } from 'element-plus';
</script>

<template>
  <el-input placeholder="Введите текст" v-model="text" />
  <el-button type="success">Сохранить</el-button>
</template>

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

Управление состоянием

Element Plus не предоставляет собственного механизма управления состоянием, но его компоненты тесно интегрируются с Vue 3 Composition API и Vuex/Pinia.

Пример использования Pinia для формы с Element Plus:

// store/form.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useFormStore = defineStore('form', () => {
  const name = ref('');
  const email = ref('');

  const reset = () => {
    name.value = '';
    email.value = '';
  };

  return { name, email, reset };
});
<template>
  <el-form>
    <el-form-item label="Имя">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Email">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-button @click="form.reset">Очистить</el-button>
  </el-form>
</template>

<script setup>
import { useFormStore } from '@/store/form';
const form = useFormStore();
</script>

Система сетки и макет

Element Plus включает мощную систему сетки, которая позволяет создавать адаптивные интерфейсы. Основные элементы: ElRow и ElCol.

<el-row :gutter="20">
  <el-col :span="8">
    <el-card>Колонка 1</el-card>
  </el-col>
  <el-col :span="8">
    <el-card>Колонка 2</el-card>
  </el-col>
  <el-col :span="8">
    <el-card>Колонка 3</el-card>
  </el-col>
</el-row>

Особенности сетки:

  • gutter — расстояние между колонками.
  • span — количество единиц сетки, которые занимает колонка (всего 24 единицы на ряд).
  • Поддержка адаптивных размеров через свойства xs, sm, md, lg, xl.

Темизация и стили

Element Plus позволяет настраивать стили через темы и CSS-переменные:

// main.js
import 'element-plus/theme-chalk/dark/css-vars.css';

Или через динамическую настройку переменных SCSS:

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

Использование темизации гарантирует единообразие интерфейса и упрощает поддержку крупных приложений.

Динамические компоненты и слоты

Element Plus активно использует слоты для кастомизации контента. Это позволяет внедрять пользовательские элементы внутрь стандартных компонентов:

<el-button type="primary">
  <template #icon>
    <el-icon><Check /></el-icon>
  </template>
  Подтвердить
</el-button>

Особенности слотов:

  • #default — основной контент компонента.
  • Именованные слоты (#header, #footer) позволяют расширять функциональность стандартных компонентов.
  • Слоты с передачей данных (scoped slots) дают доступ к внутреннему состоянию компонента.

Работа с формами и валидацией

Компоненты ElForm и ElFormItem обеспечивают удобную архитектуру для валидации форм:

<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="Email" prop="email">
    <el-input v-model="formData.email" />
  </el-form-item>
  <el-button type="primary" @click="submitForm">Отправить</el-button>
</el-form>
import { ref } from 'vue';

const formData = ref({ email: '' });
const formRef = ref(null);

const rules = {
  email: [
    { required: true, message: 'Введите email', trigger: 'blur' },
    { type: 'email', message: 'Неверный формат', trigger: 'blur' }
  ]
};

function submitForm() {
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('Форма валидна', formData.value);
    } else {
      console.log('Ошибка валидации');
      return false;
    }
  });
}

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

  • Минимизирует дублирование логики.
  • Поддерживает асинхронные проверки через функции validator.
  • Позволяет задавать правила для каждой формы отдельно.

Асинхронная загрузка компонентов

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

import { defineAsyncComponent } from 'vue';

const AsyncTable = defineAsyncComponent(() =>
  import('element-plus/es/components/table')
);

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

Итоговая архитектура

Архитектура приложения на Element Plus сочетает:

  • Компонентный подход с изоляцией логики и шаблонов.
  • Гибкую систему сетки для построения адаптивного интерфейса.
  • Глобальную и локальную регистрацию компонентов.
  • Интеграцию с управлением состоянием через Composition API, Pinia или Vuex.
  • Возможности темизации и кастомизации через CSS-переменные и слоты.
  • Инструменты для валидации форм и асинхронной загрузки компонентов для повышения производительности и удобства поддержки.

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

Оглавление