Vue.js

Оформление

Оглавление

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

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

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

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

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

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

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

Предварительные условия

  • Знакомство с командной строкой
  • Установка Node.js версии 18.3 или выше

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

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

npm
pnpm
yarn
bun
sh
$ cd <your-project-name>
$ npm install
$ npm run dev

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

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

npm
pnpm
yarn
bun
sh
$ npm run build

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

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

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

Демонстрация в Codepen

Демонстрация в Codepen

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

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

js
import { createApp } from 'vue'

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

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

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

Поддержка браузера для импорта карт

Импорт карт — относительно новая функция браузера. Убедитесь, что используете браузер в пределах его диапазона поддержки. В частности, он поддерживается только в Safari 16.4+.

Примечание по использованию в продакшене

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

По соображениям безопасности модули ES могут работать только по протоколу http://, который используется браузерами при открытии страниц в Интернете. Для того чтобы модули ES работали на нашей локальной машине, нам нужно обслуживать index.html по протоколу http:// с помощью локального HTTP-сервера.

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

Вы могли заметить, что шаблон импортируемого компонента вставляется в виде строки JavaScript. Если вы используете VS Code, вы можете установить расширение es6-string-html и префиксировать строки комментарием /*html*/, чтобы получить подсветку синтаксиса для них.

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

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

Продолжайте изучать руководство

В руководстве подробно рассматривается каждый аспект системы.

Попробуйте учебник

Для тех, кто предпочитает учиться на практике.

Посмотрите примеры

Изучите примеры основных функций и общих задач пользовательского интерфейса.

Редактировать эту страницу на GitHub