Быстрый старт
Поиграться с Vue онлайн
Чтобы быстро попробовать Vue, можно воспользоваться Песочницей.
Если предпочитаете простое HTML-окружение без каких-либо шагов сборки, то можно начать с JSFiddle.
Если уже знакомы с Node.js и концепцией инструментов сборки, то можно попробовать полноценное окружение с шагом сборки прямо в браузере на StackBlitz.
Создание приложения Vue
Предварительные условия
- Знакомство с командной строкой
- Установленная Node.js 18.3 версии или выше
В этом разделе разберёмся как развернуть на локальной машине одностраничное приложение Vue. Созданный проект будет использовать шаг сборки с помощью Vite, и позволит использовать во Vue однофайловые компоненты (SFCs).
Убедитесь, что установлена актуальная версия Node.js, после чего выполните следующую команду в командной строке (символ >
вводить не нужно):
npm
pnpm
yarn
bun
sh
$ npm create vue@latest
Команда установит и запустит create-vue — официальный инструмент для развёртывания проектов Vue. Также после запуска будут выводиться подсказки для возможности выбора ряда дополнительных функций, таких как TypeScript или поддержка тестирования:
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
Если не уверены в каком-либо варианте, просто выбирайте No
, нажав клавишу Enter. После создания проекта следуйте инструкциям по установке зависимостей и запуске сервера разработки:
npm
pnpm
yarn
bun
sh
$ cd <your-project-name>
$ npm install
$ npm run dev
Теперь уже должен быть запущен первый проект! Обратите внимание, что примеры компонентов в сгенерированном проекте написаны с использованием Composition API и <script setup>
, а не Options API. Вот несколько дополнительных советов:
- Рекомендуемая конфигурация IDE — Visual Studio Code + Vue - Официальное расширение. Если используете другие редакторы, ознакомьтесь с разделом поддержка IDE.
- Больше информации об инструментарии, включая интеграцию с бэкенд-фреймворками, обсуждается в разделе Инструментарий.
- Чтобы узнать больше об используемом инструменте сборки Vite, ознакомьтесь с документацией Vite.
- Если решили использовать TypeScript, ознакомьтесь с инструкцией по использованию TypeScript.
Когда будете готовы опубликовать приложение в production, выполните команду:
npm
pnpm
yarn
bun
sh
$ npm run build
Она создаст сборку приложения для production в каталоге ./dist
. Ознакомьтесь с руководством по развёртыванию в production, чтобы узнать больше о публикации приложения в production.
Использование Vue с помощью CDN
Можно подключать Vue напрямую из CDN через тег script:
html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
Здесь использовали unpkg, но также можно использовать любой другой CDN, который публикует npm-пакеты, например jsdelivr или cdnjs. И конечно же, всегда можно скачать этот файл и заниматься его хостингом его самостоятельно.
При использовании Vue из CDN нет никакого «шага сборки». Это значительно упрощает конфигурацию и подходит для улучшения статического HTML или для интеграции с бэкенд-фреймворком. Но в таком случае не получится использовать синтаксис однофайловых компонентов (SFC).
Использование глобальной сборки
Указанная выше ссылка загружает глобальную сборку Vue, где все API верхнего уровня доступны как свойства глобального объекта Vue
. Вот полный пример с использованием глобальной сборки:
html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello vue!')
return {
message
}
}
}).mount('#app')
</script>
Совет
Многие примеры в руководстве по использованию Composition API будут использовать синтаксис <script setup>
, который требует использования инструментов сборки. Если вы планируете использовать Composition API без этапа сборки, ознакомьтесь с использованием опции setup()
.
Использование сборки в виде ES-модуля
В остальной части документации в основном используется синтаксис ES-модулей. Большинство современных браузеров теперь поддерживают ES-модули нативно, поэтому можно подключать Vue из CDN как нативный ES-модуль таким образом:
html
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
setup() {
const message = ref('Привет Vue!')
return {
message
}
}
}).mount('#app')
</script>
Обратите внимание, что используется <script type="module">
, а импортированный CDN URL указывает на сборку в виде ES-модуля.
Использование Import maps
В примере выше импортируем по полному CDN URL, но дальше в документации увидим код, подобный этому:
js
import { createApp } from 'vue'
Чтобы импортировать в таком лаконичном формате нужно указать браузеру местоположение импорта vue
с помощью Import Maps (карту импорта):
html
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from 'vue'
createApp({
setup() {
const message = ref('Привет Vue!')
return {
message
}
}
}).mount('#app')
</script>
Также можно добавлять записи и для других зависимостей в import map — но убедитесь, что они указывают на версию ES-модуля библиотеки, которую собираетесь использовать.
Поддержка Import Maps
в браузере
Import Maps
является относительно новой возможностью браузера. Убедитесь, что браузер её поддерживает. В частности, поддерживается в Safari
с версии 16.4+
.
Примечание при использовании в production
На данный момент в примерах используется сборка Vue для разработки. Если вы собираетесь использовать Vue из CDN в рабочей среде, обязательно ознакомьтесь с Руководством по производственному развертыванию.
Хотя можно использовать Vue без системы сборки, можно рассмотреть альтернативный подход — использование vuejs/petite-vue
, который лучше подходит для контекста, в котором jquery/jquery
(в прошлом) или alpinejs/alpine
(в настоящем) можно использовать вместо этого.
Разделение на модули
По мере углубления в руководство может понадобиться разделить код на отдельные файлы JavaScript, чтобы ими было легче управлять. Например:
html
<!-- index.html -->
<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import MyComponent from './my-component.js'
createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `<div>Счётчик: {{ count }}</div>`
}
Если напрямую открыть index.html
в браузере, то обнаружите, что он выдаёт ошибку, потому что ES-модули не могут работать по протоколу file://
. Чтобы исправить эту ситуацию, необходимо раздавать index.html
по протоколу http://
с помощью локального HTTP-сервера.
Из-за соображений безопасности ES-модули могут работать только по протоколу http://
, который используется браузерами при открытии страниц в сети Интернет. Чтобы ES-модули работали на локальной машине, необходимо предоставить index.html
через протокол http://
, используя локальный HTTP-сервер.
Для запуска локального HTTP-сервера для начала нужно установить Node.js, а затем запустить команду npx serve
в том же каталоге, где находится HTML-файл. Можно использовать и любой другой HTTP-сервер, который умеет хостить статические файлы с правильными MIME-типами.
Как можно заметить, шаблон импортируемого компонента указан как строка JavaScript. При использовании VS Code можно установить расширение es6-string-html и добавить к этой строке префикс комментарием /*html*/
чтобы получить подсветку синтаксиса в них.
Следующие шаги
Если пропустили Введение, настоятельно рекомендуем прочитать его, прежде чем переходить к остальной части документации.