Быстрый старт ​

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

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

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

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

• Чтобы получить пошаговое руководство по рекомендуемой настройке, посмотрите этот интерактивный учебник Scrimba, который покажет вам, как запустить, отредактировать и развёрнуть ваше первое приложение Vue.

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

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

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

$ npm create vue@latest

$ pnpm create vue@latest

# Для Yarn (v1+)
$ yarn create vue

# Для Yarn Modern (v2+)
$ yarn create vue@latest

# Для Yarn ^v4.11
$ yarn dlx create-vue@latest

$ bun 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. После создания проекта следуйте инструкциям по установке зависимостей и запуске сервера разработки:

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

$ cd <your-project-name>
$ pnpm install
$ pnpm run dev

$ cd <your-project-name>
$ yarn
$ yarn dev

$ cd <your-project-name>
$ bun install
$ bun run dev

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

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

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

$ npm run build

$ pnpm run build

$ yarn build

$ bun 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>

<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>

Использование сборки в виде 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>

<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, но дальше в документации увидим код, подобный этому:

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>

<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-модуля библиотеки, которую собираетесь использовать.

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

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

<div id="app"></div>

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

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

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

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*/ чтобы получить подсветку синтаксиса в них.

Фреймворки ​

Vue-фреймворки со встроенной поддержкой SSR и других возможностей:

• Nuxt
• Vike
• Astro
• Quasar

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

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