Skip to content

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

Поиграться с 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. Вот несколько дополнительных советов:

Когда будете готовы опубликовать приложение в 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 } = Vue

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

Codepen демо >

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>

Codepen демо >

Совет

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

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

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

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

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

Codepen демо >

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>

Codepen демо >

Также можно добавлять записи и для других зависимостей в 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
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Счётчик: {{ count }}</div>`
}
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*/ чтобы получить подсветку синтаксиса в них.

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

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

Быстрый стартУже загружено