Интеграция с Vue CLI

Для интеграции Element Plus в проект на Vue 3 через Vue CLI необходимо сначала убедиться, что установлен Node.js версии 14 или выше и актуальная версия Vue CLI. Установка Element Plus производится через npm или yarn:

npm install element-plus --save
# или
yarn add 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')

Ключевой момент — импорт CSS-стилей, без которого компоненты будут отображаться некорректно.

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

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

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

<script>
import { ElButton } from 'element-plus'

export default {
  components: {
    ElButton
  }
}
</script>

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

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

Element Plus поддерживает настраиваемые темы с использованием CSS-переменных. Для применения кастомной темы достаточно переопределить CSS-переменные в основном файле стилей:

:root {
  --el-color-primary: #409eff;
  --el-button-border-radius: 8px;
  --el-font-size-base: 16px;
}

После этого все компоненты автоматически используют новые значения цветов, размеров и отступов. Можно также подключить SCSS- или Less-версии переменных для более гибкой кастомизации:

@use "element-plus/theme-chalk/src/index" with (
  $--color-primary: #409eff,
  $--border-radius-base: 8px
);

Конфигурация через provide/inject

Element Plus предоставляет глобальный объект конфигурации ElConfigProvider, который позволяет задавать настройки для всех компонентов на уровне приложения:

<template>
  <el-config-provider :size="'small'" :z-index="3000">
    <el-button>Маленькая кнопка</el-button>
  </el-config-provider>
</template>

<script>
import { ElConfigProvider, ElButton } from 'element-plus'

export default {
  components: {
    ElConfigProvider,
    ElButton
  }
}
</script>

Параметры, такие как size, zIndex и локализация (locale), передаются через ElConfigProvider и автоматически наследуются всеми дочерними компонентами.

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

Element Plus использует отдельный пакет для иконок. Для подключения иконок необходимо установить @element-plus/icons-vue:

npm install @element-plus/icons-vue --save

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

<template>
  <el-button type="primary" icon="Search">
    Поиск
  </el-button>
</template>

<script>
import { ElButton } from 'element-plus'
import { Search } from '@element-plus/icons-vue'

export default {
  components: {
    ElButton,
    Search
  }
}
</script>

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

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

Формы в Element Plus строятся с использованием компонентов <el-form> и <el-form-item>. Основные моменты:

  • Определение модели данных через v-model.
  • Настройка правил валидации с использованием объекта rules.
  • Поддержка асинхронной и синхронной валидации.

Пример:

<template>
  <el-form :model="form" :rules="rules" ref="formRef">
    <el-form-item label="Имя" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Отправить</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus'

export default {
  components: { ElForm, ElFormItem, ElInput, ElButton },
  setup() {
    const formRef = ref(null)
    const form = ref({ name: '' })
    const rules = {
      name: [
        { required: true, message: 'Введите имя', trigger: 'blur' }
      ]
    }

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

    return { form, rules, submitForm, formRef }
  }
}
</script>

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

Подключение локализации

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

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/ru'

const app = createApp(App)
app.use(ElementPlus, { locale })

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

Интеграция с Vue Router и Vuex/Pinia

Компоненты Element Plus полностью совместимы с Vue Router и Vuex/Pinia. Например, кнопка для навигации может использовать router-link:

<el-button type="primary">
  <router-link to="/dashboard">Перейти</router-link>
</el-button>

Для динамических данных формы или таблиц можно использовать состояние из Vuex/Pinia, что обеспечивает реактивное обновление интерфейса без дополнительного кода синхронизации.

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

Для больших проектов важна оптимизация бандла. Вместо глобального импорта всех компонентов можно использовать on-demand import с помощью unplugin-vue-components и unplugin-auto-import:

// vite.config.js или vue.config.js для Vue CLI с плагинами
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

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

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

Работа с таблицами и пагинацией

Компоненты <el-table> и <el-pagination> обеспечивают мощные возможности для отображения больших массивов данных:

<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="id" label="ID" width="50"></el-table-column>
  <el-table-column prop="name" label="Имя"></el-table-column>
  <el-table-column prop="email" label="Email"></el-table-column>
</el-table>

<el-pagination
  background
  layout="prev, pager, next"
  :total="100"
  @current-change="handlePageChange">
</el-pagination>

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

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

Оглавление