Skip to content

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

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

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

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

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

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

Передумови

  • Знайомство з командним рядком
  • Встановіть Node.js версії 16.0 або новішу

У цій секції ми розповімо, як створити 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. Ось кілька додаткових порад:

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

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

Демонстрація JSFiddle

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 demo

TIP

У багатьох прикладах Композиційний API у посібнику використовуватиметься синтаксис <script setup>, для якого потрібні інструменти для збірки. Якщо ви збираєтеся використовувати Композиційний 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">, а імпортована URL-адреса CDN натомість вказує на збірку модулів ES Vue.

Увімкнення карт імпорту

У наведеному вище прикладі ми імпортуємо з повної 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>

Демонстрація JSFiddle

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('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Codepen demo

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

Підтримка карт імпорту браузерами

Імпорт карт — відносно нова функція браузера. Обов'язково використовуйте веб-переглядач у діапазоні підтримки. Зокрема, він підтримується лише в Safari 16.4+.

Примітки щодо виробничого використання

У наведених прикладах наразі використовується збірка Vue для розробки. Якщо ви збираєтеся використовувати Vue із CDN у виробництві, обов’язково перегляньте Посібник із розгортання виробництва. -інструменти).

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

В процесі проходження гіда, нам може бути корисно розбивати наш код на окремі файли 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-типами.

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

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

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

Швидкий старт has loaded