Нові рекомендації на рівні фреймворку

Допоміжні бібліотеки для Vue 3 зазнали серйозних оновлень. Ось підсумок нових рекомендацій за умовчанням:

• Нові версії Router, Devtools і test utils з підтримкою Vue 3
• Збірка інструментів: Vue CLI -> Vite
• Управління станом: Vuex -> Pinia
• Підтримка IDE: Vetur -> Volar
• Нова підтримка TypeScript командного рядка: vue-tsc
• SSG: VuePress -> VitePress
• JSX: @vue/babel-preset-jsx -> @vue/babel-plugin-jsx

Деталі

Інструменти збірки

Тепер ми рекомендуємо Vite як новий інструментарій збірки для проєктів Vue 3. Vite — це новий інструмент збірки, який забезпечує надзвичайно швидкий запуск сервера та продуктивність гарячого оновлення. Спочатку він був створений командою Vue, але тепер це міжфреймворковий інструмент. Дізнайтеся більше про чому ми рекомендуємо Vite.

Ви можете створити новий проєкт Vue 3 на базі Vite за допомогою create-vue, нашого нового інструменту скелета:

npm init vue@3

Хоча Vue CLI також було оновлено для підтримки Vue 3, зараз він перебуває на технічному обслуговуванні та більше не рекомендований для нових проєктів. Щоб отримати інформацію щодо переходу з Vue CLI на Vite:

• Vue CLI -> Посібник з міграції Vite від VueSchool.io
• Інструменти/плагіни, які допомагають з автоматичною міграцією

Також див. розділ про інструменти в нових документах.

Маршрутизатор Vue

Vue Router 4.0 забезпечує підтримку Vue 3 і має ряд власних критичних змін. Перегляньте його посібник з міграції, щоб отримати повну інформацію.

• Документація
• GitHub
• RFC

Керування станом

Pinia — нове рекомендоване рішення для великомасштабного управління державою. Pinia було створено як прототип для Vuex 5, і тепер він перетворився на фактичну реалізацію того, що ми планували для Vuex 5. Ми вирішили зберегти його початкову назву з огляду на обсяг роботи, яку доклав до цього член основної команди Едуардо.

• Документація
• GitHub
• Розділ про керування станом в новій документації

Vuex 4.0 також надає підтримку Vue 3 із майже тим самим API, що й 3.x, і його можна використовувати, якщо у вас є наявні сховища Vuex, які потрібно перенести на Vue 3. Єдиною критичною зміною є спосіб встановлення плагіна.

Підтримка IDE

Volar тепер є новим офіційним розширенням VSCode зі значно покращеною підтримкою TypeScript для Vue SFC, включаючи повне визначення типу для шаблонних виразів.

Якщо ви раніше встановили Vetur, обов’язково вимкніть його, щоб уникнути конфлікту з Volar.

Розширення Devtools

Розширення devtools отримало значні оновлення (випущено як v6) для підтримки як Vue 2, так і Vue 3. Якщо ви раніше встановили v6 через бета-канал, ви можете видалити його та встановити розширення зі стабільного каналу зараз.

• Документація
• GitHub

Підтримка TypeScript

Тепер ви можете перевіряти тип і генерувати файли визначення для Vue SFC з командного рядка за допомогою vue-tsc.

Також перегляньте Посібник з TypeScript у новій документації.

Генератор статичного сайту

VitePress є наступником VuePress, створеним на основі Vue 3 + Vite. Це забезпечує набагато кращий досвід розробника, а також створює швидші сайти.

JSX

Підтримка JSX для Vue 3 тепер надається через @vue/babel-plugin-jsx.