Подключение через CDN

Для быстрого использования компонентов Element Plus в проектах на Vue.js без необходимости настраивать сборку через Vite, Webpack или другие сборщики, можно подключить библиотеку напрямую через CDN. Это особенно удобно для прототипов, небольших проектов или образовательных целей.

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

Библиотека состоит из двух ключевых частей: CSS для оформления компонентов и JavaScript для их функциональности. При подключении через CDN необходимо указать оба файла в HTML:

<!-- Element Plus CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />

<!-- Vue.js (необходима для работы Element Plus) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- Element Plus JS -->
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>

Важно: подключение должно происходить после Vue.js, поскольку Element Plus зависит от экземпляра Vue.

Инициализация Element Plus

После подключения файлов через CDN, библиотеку необходимо зарегистрировать в экземпляре Vue. Для глобальной регистрации компонентов используется метод app.use():

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

<script>
const { createApp } = Vue;
const { ElButton } = ElementPlus;

const app = createApp({
  data() {
    return {};
  }
});

// Глобальная регистрация всех компонентов Element Plus
app.use(ElementPlus);

// Или выборочная регистрация компонента
// app.component('ElButton', ElButton);

app.mount('#app');
</script>

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

  • app.use(ElementPlus) подключает все компоненты библиотеки.
  • Можно использовать выборочную регистрацию, чтобы уменьшить нагрузку на страницу.

Подключение через UNPKG и JSDelivr

Element Plus доступен на популярных CDN-платформах:

  1. UNPKG

    • CSS: https://unpkg.com/element-plus/dist/index.css
    • JS: https://unpkg.com/element-plus/dist/index.full.js

  2. JSDelivr

    • CSS: https://cdn.jsdelivr.net/npm/element-plus/dist/index.css
    • JS: https://cdn.jsdelivr.net/npm/element-plus/dist/index.full.js

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

Работа с компонентами

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

<el-input v-model="text" placeholder="Введите текст"></el-input>
<el-button type="success" @click="submit">Отправить</el-button>
const app = createApp({
  data() {
    return {
      text: ''
    };
  },
  methods: {
    submit() {
      console.log(this.text);
    }
  }
});
app.use(ElementPlus);
app.mount('#app');

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

  • Все компоненты работают сразу после подключения через CDN.
  • События и двустороннее связывание (v-model) полностью поддерживаются.
  • Стили компонентов подключаются через CSS, поэтому важна последовательность <link> и <script> тегов.

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

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

<script src="https://unpkg.com/@element-plus/icons-vue/dist/index.full.js"></script>
const { ElIcon, Plus } = ElementPlusIconsVue;

app.component('ElIcon', ElIcon);
app.component('Plus', Plus);

Пример использования:

<el-button type="primary">
  <el-icon><plus /></el-icon>
  Добавить
</el-button>

Темизация через CSS Variables

Подключение через CDN позволяет использовать CSS-переменные для настройки внешнего вида компонентов без пересборки проекта:

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

Все компоненты автоматически подхватывают новые значения переменных.

Ограничения CDN-подключения

  • Полная поддержка tree-shaking невозможна: подключаются все компоненты, даже если используются лишь некоторые.
  • Возможны конфликты версий при одновременном использовании других библиотек через CDN.
  • Для крупных проектов рекомендуется использовать сборщик модулей для оптимизации загрузки.

Версионирование

Для стабильной работы важно фиксировать версию библиотеки:

<link rel="stylesheet" href="https://unpkg.com/element-plus@2.3.6/dist/index.css" />
<script src="https://unpkg.com/element-plus@2.3.6/dist/index.full.js"></script>

Так можно избежать проблем с неожиданными обновлениями и несовместимостью API.

Оглавление