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

Попробуйте Vue онлайн ​

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

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

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

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

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

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

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

$ 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

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

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

Когда вы будете готовы отправить свое приложение в продакшен, выполните следующие действия:

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

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

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

Использование 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('Привет, 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 Vue.

Карты импорта ​

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

import { createApp } from 'vue'

Мы можем указать браузеру, откуда импортировать vue, используя карты импорта:

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

Вы также можете добавить записи для других зависимостей в карту импорта — но убедитесь, что они указывают на версию 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://, который браузер использует, когда вы открываете локальный файл.

По соображениям безопасности модули 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

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

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