Vue.js

Внешний вид

Содержание

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

Поиграться с 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 / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … 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-модуля.

Codepen демо

Codepen демо

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

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

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

Руководство

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

Самоучитель

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

Примеры

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

Исправить эту страницу на GitHub