Как подключить Vue к HTML-странице?
Подключение Vue к HTML-странице можно осуществить несколькими способами, в зависимости от того, нужен ли тебе минимальный пример на «голом» HTML или полноценный проект с модульной системой, сборщиком и компонентами. Здесь будет подробно разобран первый подход — подключение Vue через CDN, а также базовое объяснение, как он работает в реальной HTML-странице без сборщиков, npm и CLI.
1. Подключение Vue через CDN
Это самый простой способ, не требующий установки каких-либо зависимостей или использования сборщиков типа Webpack или Vite. Подключается всего одна строка <script> из CDN.
Пример: минимальный HTML-файл с Vue 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Hello</title>
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<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>
</body>
</html>
Объяснение:
-
https://unpkg.com/vue@3.4.21/dist/vue.global.js — это ссылка на UMD-бандл Vue 3 с поддержкой глобальных переменных.
-
createApp(...) — создаёт экземпляр приложения.
-
.mount('#app') — указывает, куда именно во вставленном DOM подключить Vue-приложение.
-
Внутри data() — реактивные переменные.
-
{{ message }} — привязка к данным.
-
@click="reverseMessage" — обработчик события.
2. Использование атрибутов и директив Vue
Vue предоставляет удобные атрибуты, которые можно использовать прямо в HTML:
-
v-bind:href="url" или :href="url" — привязка атрибута.
-
v-on:click="action" или @click="action" — привязка событий.
-
v-if, v-else, v-show, v-for — условные конструкции и циклы.
-
v-model="inputValue" — двусторонняя привязка значений форм.
Пример:
<div id="app">
<input v-model="name" placeholder="Введите имя" />
<p>Привет, {{ name }}!</p>
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
name: ''
}
}
}).mount('#app')
</script>
3. Разделение логики: вынесение скрипта в отдельный файл
Ты можешь вынести createApp в отдельный .js-файл и подключить его в <script src="app.js">. Главное — убедиться, что CDN Vue подключён раньше.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Vue App</title>
<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
<script src="app.js" defer></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
</div>
</body>
</html>
#### **app.js**
const { createApp } = Vue
createApp({
data() {
return {
title: 'Приложение Vue подключено!'
}
}
}).mount('#app')
4. Повторное использование компонентов через component
Даже без сборки и CLI ты можешь создать компоненты прямо в JS-коде:
<div id="app">
<my-message></my-message>
</div>
<script>
const { createApp } = Vue
const MyMessage = {
template: \`<p>Это переиспользуемый компонент!</p>\`
}
const app = createApp({})
app.component('my-message', MyMessage)
app.mount('#app')
</script>
5. Версия Vue: ESM, UMD и runtime-only
Когда ты используешь Vue через CDN, обрати внимание на тип файла:
Тип | Путь | Поддержка шаблонов |
---|---|---|
UMD (полный) | vue.global.js | ✅ |
--- | --- | --- |
Runtime-only | vue.runtime.global.js | ❌ (только render-функции) |
--- | --- | --- |
ESM-модуль | vue.esm-browser.js | ✅ (для импортов в браузере с <script type="module">) |
--- | --- | --- |
Если ты планируешь использовать шаблоны (template), всегда используй полный UMD-бандл — vue.global.js.
6. Возможна и модульная загрузка через <script type="module">
Если ты хочешь использовать ESM без сборщика:
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3.4.21/dist/vue.esm-browser.js'
createApp({
data() {
return { count: 0 }
}
}).mount('#app')
</script>
Для этого нужно использовать <script type="module">, а весь HTML должен быть загружен с веб-сервера (иначе возникнет CORS-ошибка).
Ограничения подхода через CDN
-
Нельзя использовать .vue-файлы (Single File Components).
-
Нет TypeScript, автокомпиляции, линтинга, Hot Module Replacement.
-
Нет автоматической сборки и оптимизации (минификация, tree-shaking).
-
Нельзя легко подключать сторонние NPM-библиотеки.
Такой способ хорош для прототипов, экспериментов или встраивания Vue в существующие страницы. Для серьёзных проектов предпочтительнее использовать Vue CLI или Vite.
Подключив Vue таким образом, ты можешь быстро начать работать с реактивными интерфейсами без установки дополнительных инструментов.