Установка через yarn

Element Plus — современная библиотека компонентов для Vue 3, обеспечивающая готовые UI-элементы с широкими возможностями кастомизации. Для интеграции в проект на Vue 3 рекомендуется использовать пакетный менеджер Yarn, который обеспечивает быструю установку и управление зависимостями.

Подготовка проекта

Перед установкой Element Plus необходимо убедиться, что проект создан на базе Vue 3. Если проект ещё не инициализирован, создаётся с помощью Vue CLI или Vite:

# С использованием Vue CLI
vue create my-project

# С использованием Vite
yarn create vite my-project --template vue

После этого переходим в каталог проекта:

cd my-project

Установка Element Plus

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

yarn add element-plus

Эта команда автоматически загрузит последнюю стабильную версию Element Plus и добавит её в package.json в разделе dependencies.

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

После установки необходимо подключить библиотеку в проекте. В основном файле приложения (обычно 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-библиотека element-plus/dist/index.css, чтобы компоненты корректно отображались с дефолтными стилями.
  • Использование app.use(ElementPlus) обеспечивает доступ ко всем компонентам в шаблонах Vue.

Установка конкретных компонентов

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

import { createApp } from 'vue'
import App from './App.vue'
import { ElButton, ElInput } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/input/style/css'

const app = createApp(App)
app.component(ElButton.name, ElButton)
app.component(ElInput.name, ElInput)
app.mount('#app')

Преимущества такого подхода:

  • Снижается общий вес приложения.
  • Улучшается скорость загрузки и рендеринга страниц.
  • Контроль над используемыми компонентами и стилями.

Проверка установки

После установки и регистрации компонентов можно проверить работоспособность, создав простой компонент в App.vue:

<template>
  <el-button type="primary">Нажми меня</el-button>
  <el-input placeholder="Введите текст"></el-input>
</template>

<script>
export default {
  name: 'App'
}
</script>

При корректной установке кнопка и поле ввода будут отображаться с фирменными стилями Element Plus.

Обновление библиотеки через Yarn

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

yarn upgrade element-plus

Она проверяет текущую версию и обновляет пакет в соответствии с указанными в package.json правилами семантического версионирования.

Если требуется установить конкретную версию:

yarn add element-plus@2.3.0

Резюме по установке через Yarn

  • Инициализация проекта: Vue 3 + Yarn.
  • Добавление Element Plus: yarn add element-plus.
  • Глобальная регистрация: app.use(ElementPlus).
  • Локальная регистрация компонентов: импорт отдельных компонентов и их стилей.
  • Проверка работоспособности: создание простых UI-элементов.
  • Обновление: yarn upgrade element-plus или установка конкретной версии.

Такой подход обеспечивает чистую интеграцию Element Plus в проект на Vue 3, минимизирует вес приложения и упрощает управление зависимостями.

Оглавление