Швидкий старт ​

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

• Щоб швидко відчути смак Vue, спробуйте його безпосередньо в нашій пісочниці.

• Якщо ви віддаєте перевагу звичайному HTML без етапу збірки, ви можете використовувати цей JSFiddle, як відправну точку.

• Якщо ви вже знайомі з Node.js і концепціями інструментів збірки, також можете спробувати повноцінну відправну збірку, прямо у вашому браузері на StackBlitz.

Створення застосунку Vue ​

У цій секції ми розповімо, як створити Vue одно-сторінковий додаток на вашому локальному комп'ютері. Створений проєкт буде використовувати збірку, яка заснована на Vite, і дозволяє використовувати одно-файлові компоненти Vue (SFC).

Переконайтеся, що у вас встановлено найновішу версію Node.js, і ваш поточний робочий каталог є тим, у якому ви збираєтеся створити проект. Виконайте наступну команду в командному рядку (без знаку >):

> npm create vue@latest

Ця команда встановить і виконає create-vue, офіційний інструмент створення проєктів Vue. Вам буде надано підказки щодо ряду додаткових функцій, таких як TypeScript з підтримкою тестування:

✔ Project name: … <назва-вашого-проєкту-без-пробілів>
✔ Add TypeScript? … No / Yes (Чи використовувати TypeScript)
✔ Add JSX Support? … No / Yes (Чи використовувати JSX стиль)
✔ Add Vue Router for Single Page Application development? … No / Yes (Чи бажаєте додати Vue Router для розробки односторінкових додатків - SPA)
✔ Add Pinia for state management? … No / Yes (Чи бажаєте додати Pinia для керування станом додатку)
✔ Add Vitest for Unit testing? … No / Yes (Чи бажаєте використовувати Vitest для модульних тестів)
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright (Чи бажаєте використовувати рішення для наскрізного тестування)
✔ Add ESLint for code quality? … No / Yes (Чи бажаєте використовувати Eslint для перевірки на правильність написання коду)
✔ Add Prettier for code formatting? … No / Yes (Чи бажаєте додати Prettier для автоматичного форматування коду)

Scaffolding project in ./<назва-вашого-проєкту-без-пробілів>...
Done.

Якщо ви не впевнені щодо варіанту, просто виберіть «No» (Ні), натиснувши Enter. Після створення проєкту дотримуйтесь інструкцій для встановлення залежностей та запуску сервера в режимі розробки:

> cd <назва-вашого-проєкту-без-пробілів>
> npm install
> npm run dev

Вітаємо, тепер у вас має бути запущений перший проєкт на Vue! Зауважте, що приклади компонентів у створеному проєкті написані за допомогою Композиційного API і <script setup>, а не Опційним API. Ось кілька додаткових порад:

• Рекомендовано використовувати Visual Studio Code в якості вашої IDE ї розширенням Volar. Якщо ви користуєтесь іншими редакторами, перевірте можливості щодо їхньої підтримки.
• Стосовно інших інструментів, зокрема інтеграції з бекенд фреймворками, перегляньте наш Гід по інструментах.
• Для поглибленого вивчення інструментів, на яких оснований Vite, перегляньте документацію по Vite.
• Якщо ви користуєтесь TypeScript, пропонуємо до вашої уваги Гід по використанню TypeScript.

Коли ви будете готові до запуску свого додатку у продакшн, виконайте наступне:

> npm 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">, а імпортована URL-адреса CDN натомість вказує на збірку модулів 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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Ви також можете додавати записи для інших залежностей до карти імпорту — але переконайтесь, що вони вказують саме на ES модуль бібліотеки, яку ви збираєтесь використовувати.

Розділення модулів ​

В процесі проходження гіда, нам може бути корисно розбивати наш код на окремі файли JavaScript, щоб, таким чином, було легше обслуговувати додаток. Наприклад:

<!-- index.html -->
<div id="app"></div>

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

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

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>лічильник {{ count }}</div>`
}

// 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-типами.

Можливо, ви помітили, що імпортовані шаблони компонентів вказані у вигляді JavasScript рядка. Якщо ви використовуєте VSCode, ви можете встановити розширення es6-string-html та додавати коментар /*html*/ перед такими рядками, щоб VSCode підсвічував для них синтаксис.

Наступні кроки ​

Якщо ви пропустили Вступ, ми наполегливо радимо його прочитати перед тим, як рухатись далі цією документацією.