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

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

Инициализация проекта

Если проект ещё не создан, необходимо сначала инициализировать Vue 3 проект. В терминале выполняется команда:

pnpm create vue@latest my-element-plus-app

Параметры команды позволяют выбрать:

  • TypeScript или JavaScript
  • Интеграцию с ESLint
  • Поддержку Vue Router и Pinia

После завершения инициализации нужно перейти в каталог проекта:

cd my-element-plus-app

И установить все зависимости проекта через pnpm:

pnpm install

Установка Element Plus

Element Plus доступен как npm-пакет и может быть установлен через pnpm:

pnpm add element-plus

Данная команда скачивает последнюю стабильную версию библиотеки и добавляет её в package.json проекта. Важно убедиться, что установленная версия совместима с версией Vue 3.

Подключение стилей

Element Plus использует CSS-переменные для управления темами. Для корректного отображения компонентов необходимо импортировать стили. В main.js или main.ts добавляется:

import { createApp } from 'vue'
import App from './App.vue'

// Подключение стилей Element Plus
import 'element-plus/dist/index.css'

import ElementPlus from 'element-plus'

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

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

Использование модульного импорта

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

import { createApp } from 'vue'
import App from './App.vue'

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

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

app.mount('#app')

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

Настройка темы

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

:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
}

И подключается в main.js:

import './theme.css'

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

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

<template>
  <el-button type="primary">Кнопка Element Plus</el-button>
</template>

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

Если кнопка отображается с корректным стилем, интеграция завершена успешно.

Обновление Element Plus через pnpm

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

pnpm update element-plus

Команда обновляет пакет в соответствии с правилами версии, указанными в package.json.

Важные особенности работы с pnpm

  • Скорость установки: благодаря использованию единого кэша pnpm значительно быстрее npm или yarn.
  • Дедупликация зависимостей: одна версия пакета хранится централизованно и используется в нескольких проектах.
  • Совместимость с monorepo: pnpm особенно удобен для крупных проектов с несколькими пакетами.

Эти особенности делают pnpm оптимальным инструментом для установки и обновления Element Plus в современных Vue 3 проектах.

Оглавление