Швидкий старт
Спробуйте Vue онлайн
Щоб швидко відчути смак Vue, спробуйте його безпосередньо в нашій пісочниці.
Якщо ви віддаєте перевагу звичайному HTML без етапу збірки, ви можете використовувати цей JSFiddle, як відправну точку.
Якщо ви вже знайомі з Node.js і концепціями інструментів збірки, також можете спробувати повноцінну відправну збірку, прямо у вашому браузері на StackBlitz.
Створення застосунку Vue
Передумови
- Знайомство з командним рядком
- Встановіть Node.js версії 18.0 або новішу
У цій секції ми розповімо, як створити Vue одно-сторінковий додаток на вашому локальному комп'ютері. Створений проєкт буде використовувати збірку, яка заснована на Vite, і дозволяє використовувати одно-файлові компоненти Vue (SFC).
Переконайтеся, що у вас встановлено найновішу версію Node.js, і ваш поточний робочий каталог є тим, у якому ви збираєтеся створити проект. Виконайте наступну команду в командному рядку (без знаку $
):
npm
pnpm
yarn
bun
sh
$ 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. Після створення проєкту дотримуйтесь інструкцій для встановлення залежностей та запуску сервера в режимі розробки:
npm
pnpm
yarn
bun
sh
$ cd <your-project-name>
$ npm install
$ npm run dev
Вітаємо, тепер у вас має бути запущений перший проєкт на Vue! Зауважте, що приклади компонентів у створеному проєкті написані за допомогою Композиційного API і <script setup>
, а не Опційним API. Ось кілька додаткових порад:
- Рекомендовано використовувати Visual Studio Code в якості вашої IDE ї розширенням Volar. Якщо ви користуєтесь іншими редакторами, перевірте можливості щодо їхньої підтримки.
- Стосовно інших інструментів, зокрема інтеграції з бекенд фреймворками, перегляньте наш Гід по інструментах.
- Для поглибленого вивчення інструментів, на яких оснований Vite, перегляньте документацію по Vite.
- Якщо ви користуєтесь TypeScript, пропонуємо до вашої уваги Гід по використанню TypeScript.
Коли ви будете готові до запуску свого додатку у продакшн, виконайте наступне:
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, ref } = Vue
createApp({
setup() {
const message = ref('Привіт, Vue!')
return {
message
}
}
}).mount('#app')
</script>
TIP
У багатьох прикладах Композиційний API у посібнику використовуватиметься синтаксис <script setup>
, для якого потрібні інструменти для збірки. Якщо ви збираєтеся використовувати Композиційний API без кроку збірки, ознайомтеся з використанням параметра setup()
.
Використання збірки модулів ES
У решті документації ми будемо в основному використовувати синтаксис модулів ES. Більшість сучасних браузерів зараз підтримують модулі ES, тому ми можемо використовувати Vue із CDN через нативні модулі ES, як тут:
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, ref } from 'vue'
createApp({
setup() {
const message = ref('Hello Vue!')
return {
message
}
}
}).mount('#app')
</script>
Ви також можете додавати записи для інших залежностей до карти імпорту — але переконайтесь, що вони вказують саме на 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
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 підсвічував для них синтаксис.
Наступні кроки
Якщо ви пропустили Вступ, ми наполегливо радимо його прочитати перед тим, як рухатись далі цією документацією.