Быстрый старт #

Поиграться с Vue онлайн #

• Чтобы быстро попробовать Vue, можно воспользоваться Песочницей.

• Если предпочитаете простое HTML-окружение без каких-либо шагов сборки, то можно начать с JSFiddle.

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

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

В этом разделе разберёмся как развернуть на локальной машине одностраничное приложение Vue. Созданный проект будет использовать шаг сборки с помощью Vite, и позволит использовать во Vue однофайловые компоненты (SFCs).

Убедитесь, что установлена актуальная версия Node.js, после чего выполните следующую команду в командной строке (символ > вводить не нужно):

> npm init 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

Если не уверены в каком-либо варианте, просто выбирайте No, нажав клавишу Enter. После создания проекта следуйте инструкциям по установке зависимостей и запуске сервера разработки:

> cd <your-project-name>
> npm install
> npm run dev

Теперь уже должен быть запущен первый проект! Обратите внимание, что примеры компонентов в сгенерированном проекте написаны с использованием Composition API и <script setup>, а не Options API. Вот несколько дополнительных советов:

• Рекомендуемая конфигурация IDE — Visual Studio Code + расширение Volar. Если используете другие редакторы, ознакомьтесь с разделом поддержка IDE.
• Больше информации об инструментарии, включая интеграцию с бэкенд-фреймворками, обсуждается в разделе Инструментарий.
• Чтобы узнать больше об используемом инструменте сборки Vite, ознакомьтесь с документацией Vite.
• Если решили использовать TypeScript, ознакомьтесь с инструкцией по использованию TypeScript.

Когда будете готовы опубликовать приложение в production, выполните команду:

> npm run build

Она создаст сборку приложения для production в каталоге ./dist. Ознакомьтесь с руководством по развёртыванию в production, чтобы узнать больше о публикации приложения в production.

Следующие шаги >

Использование Vue с помощью CDN #

Можно подключать Vue напрямую из CDN через тег script:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Здесь использовали unpkg, но также можно использовать любой другой CDN, который публикует npm-пакеты, например jsdelivr или cdnjs. И конечно же, всегда можно скачать этот файл и заниматься его хостингом его самостоятельно.

При использовании Vue из CDN нет никакого «шага сборки». Это значительно упрощает конфигурацию и подходит для улучшения статического HTML или для интеграции с бэкенд-фреймворком. Но в таком случае не получится использовать синтаксис однофайловых компонентов (SFC).

Использование глобальной сборки #

Указанная выше ссылка загружает глобальную сборку Vue, где все API верхнего уровня доступны как свойства глобального объекта Vue. Вот полный пример с использованием глобальной сборки:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Привет Vue!'
      }
    }
  }).mount('#app')
</script>

Демо в JSFiddle

Использование сборки в виде ES-модуля #

В остальной части документации в основном используется синтаксис ES-модулей. Большинство современных браузеров теперь поддерживают ES-модули нативно, поэтому можно подключать Vue из CDN как нативный ES-модуль таким образом:

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Привет Vue!'
      }
    }
  }).mount('#app')
</script>

Обратите внимание, что используется <script type="module">, а импортированный CDN URL указывает на сборку в виде ES-модуля.

Демо в JSFiddle

Использование Import maps #

В примере выше импортируем по полному CDN URL, но дальше в документации увидим код, подобный этому:

import { createApp } from 'vue'

Чтобы импортировать в таком лаконичном формате нужно указать браузеру местоположение импорта vue с помощью Import Maps (карту импорта):

<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 } from 'vue'

  createApp({
    data() {
      return {
        message: 'Привет Vue!'
      }
    }
  }).mount('#app')
</script>

Демо в JSFiddle

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

Разделение на модули #

По мере углубления в руководство может понадобиться разделить код на отдельные файлы JavaScript, чтобы ими было легче управлять. Например:

<!-- index.html -->
<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Счётчик: {{ count }}</div>`
}

Если напрямую открыть index.html в браузере, то обнаружите, что он выдаёт ошибку, потому что ES-модули не могут работать по протоколу file://. Чтобы исправить эту ситуацию, необходимо раздавать index.html по протоколу http:// с помощью локального HTTP-сервера.

Для запуска локального HTTP-сервера для начала нужно установить Node.js, а затем запустить команду npx serve в том же каталоге, где находится HTML-файл. Можно использовать и любой другой HTTP-сервер, который умеет хостить статические файлы с правильными MIME-типами.

Как можно заметить, шаблон импортируемого компонента указан как строка JavaScript. При использовании VSCode можно установить расширение es6-string-html и добавить к этой строке префикс комментарием /*html*/ чтобы получить подсветку синтаксиса в них.

Использование Composition API без шага сборки #

Во многих примерах с Composition API используется синтаксис <script setup>. Если собираетесь использовать Composition API без шага сборки, ознакомьтесь сначала с документацией по опции setup().

Следующие шаги #

Если пропустили Введение, настоятельно рекомендуем прочитать его, прежде чем переходить к остальной части документации.