CDN интеграция

Использование Vue.js через CDN позволяет быстро подключить фреймворк к проекту без настройки сборщиков вроде Webpack или Vite. Такой подход удобен для прототипирования, небольших проектов или учебных целей.

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

Для подключения Vue.js используется тег <script> с указанием URL библиотеки. Наиболее распространённые варианты:

<!-- Vue 3 (production) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- Vue 3 (development, с предупреждениями и проверкой типов) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

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

  • vue.global.js — версия для разработки, включает предупреждения и проверку ошибок.
  • vue.global.prod.js — оптимизированная версия для продакшена, не содержит предупреждений, меньше весит.
  • Подключение должно происходить до использования Vue в коде.

Создание приложения Vue

После подключения библиотеки создаётся экземпляр приложения через Vue.createApp():

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="reverseMessage">Обратить строку</button>
</div>

<script>
const { createApp } = Vue;

createApp({
  data() {
    return {
      message: 'Привет, Vue!'
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
}).mount('#app');
</script>

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

  • createApp() создаёт новый Vue-экземпляр.
  • data() возвращает объект состояния приложения.
  • methods содержит функции, доступные из шаблона.
  • @click — директива для обработки событий, аналог v-on:click.

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

Vue позволяет создавать локальные компоненты прямо в коде:

<div id="app">
  <hello-world></hello-world>
</div>

<script>
const { createApp } = Vue;

const HelloWorld = {
  template: `<p>Привет из компонента!</p>`
};

createApp({
  components: {
    'hello-world': HelloWorld
  }
}).mount('#app');
</script>

Особенности компонентов при CDN-подключении:

  • Компоненты объявляются объектами с шаблоном template.
  • Имя компонента в components должно соответствовать тегу в HTML.
  • Локальные компоненты ограничены областью приложения, глобальные подключаются через app.component('имя', объект).

Реактивность данных

Vue автоматически отслеживает изменения в объекте data. Любые обновления данных мгновенно отражаются в DOM:

<div id="app">
  <input v-model="text" placeholder="Введите текст">
  <p>Вы ввели: {{ text }}</p>
</div>

<script>
const { createApp } = Vue;

createApp({
  data() {
    return {
      text: ''
    };
  }
}).mount('#app');
</script>

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

  • v-model связывает значение поля ввода с состоянием данных.
  • Любое изменение text автоматически обновляет содержимое <p>.

Директивы и события

Vue предоставляет набор встроенных директив для управления DOM:

  • v-if, v-else-if, v-else — условный рендеринг.
  • v-for — циклический рендеринг массивов.
  • v-bind — связывание атрибутов.
  • v-on — обработка событий.

Пример комбинирования:

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id" @click="selectItem(item)">
      {{ item.name }}
    </li>
  </ul>
  <p v-if="selected">Вы выбрали: {{ selected.name }}</p>
</div>

<script>
const { createApp } = Vue;

createApp({
  data() {
    return {
      items: [
        { id: 1, name: 'Первый' },
        { id: 2, name: 'Второй' }
      ],
      selected: null
    };
  },
  methods: {
    selectItem(item) {
      this.selected = item;
    }
  }
}).mount('#app');
</script>

Работа с шаблонами

CDN-подключение позволяет использовать как inline-шаблоны, так и шаблоны из script с типом text/x-template:

<script type="text/x-template" id="my-template">
  <div>
    <p>Это шаблон из <code>script</code></p>
  </div>
</script>

<div id="app">
  <my-template></my-template>
</div>

<script>
const { createApp } = Vue;

const MyTemplate = {
  template: '#my-template'
};

createApp({
  components: {
    'my-template': MyTemplate
  }
}).mount('#app');
</script>

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

  • Использование id шаблона позволяет подключать HTML отдельно от основного кода.
  • Удобно для больших проектов без сборщика.

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

  • Нет поддержки модульной системы (import/export).
  • Для сложных приложений рекомендуется использовать сборщик.
  • Зависимость от внешнего источника; при отсутствии интернет-соединения библиотека не загрузится.

Итоговые рекомендации по работе с CDN

  • Подключение через CDN удобно для небольших проектов и прототипов.
  • Использовать vue.global.js для разработки и vue.global.prod.js для продакшена.
  • Для больших приложений стоит рассмотреть переход на сборщик модулей и NPM-пакет Vue.
Оглавление