Vue.js

Зовнішній вигляд

На цій сторінці

Інструменти ​

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

Вам не потрібно нічого встановлювати на свій комп’ютер, щоб випробувати однофайлові компоненти Vue – існують онлайн пісочниці, які дозволяють робити це прямо у браузері:

  • Пісочниця Vue SFC
    • Завжди розгортається з останнього коміту
    • Призначена для перевірки результатів компіляції компонентів
  • Vue + Vite на StackBlitz
    • Середовище, схоже на IDE, що запускає фактичний сервер розробки Vite у браузері
    • Найближче до локального налаштування

Також рекомендується використовувати ці онлайн пісочниці, для надання репродукцій при повідомленні про помилки.

Створення проєкту ​

Vite ​

Vite — це легкий і швидкий інструмент для розробки з першокласною підтримкою Vue SFC. Його створив Еван Ю, який також є автором Vue!

Щоб розпочати роботу з Vite + Vue, просто запустіть:

$ npm create vue@latest

Ця команда встановить та виконає create-vue, офіційний інструмент створення проєктів Vue.

  • Щоб дізнатися більше про Vite, перегляньте документацію Vite.
  • Щоб налаштувати спеціальну поведінку Vue у проєкті Vite, наприклад, передати параметри компілятору Vue, перегляньте документацію для @vitejs/plugin-vue.

Обидві онлайн-пісочниці, згадані вище, також підтримують завантаження файлів як проєкт Vite.

Vue CLI ​

Vue CLI — це офіційний інструментарій для Vue на основі Webpack. Зараз він у режимі обслуговування, і ми рекомендуємо починати нові проєкти з Vite, якщо ви не покладаєтеся на певні функції лише для Webpack. У більшості випадків Vite забезпечить чудовий досвід розробки.

Щоб отримати інформацію щодо переходу з Vue CLI на Vite:

Примітка щодо компіляції шаблонів у браузері ​

У разі використання Vue без етапу збірки, шаблони компонентів записуються або безпосередньо в HTML сторінки, або як вбудовані рядки JavaScript. У таких випадках Vue потрібно надіслати компілятор шаблону в браузер, щоб виконати компіляцію шаблону на льоту. З іншого боку, компілятор буде непотрібним, якщо ми попередньо скомпілюємо шаблони з етапом збірки. Щоб зменшити розмір пакета клієнта, Vue надає різні "збірки", оптимізовані для різних випадків використання.

  • Файли збірки, які починаються з vue.runtime.* є збірками лише для виконання: вони не включають компілятор. Під час використання цих збірок усі шаблони мають бути попередньо скомпільовані на етапі збірки.

  • Файли збірки, які не містять .runtime, є повними збірками: вони включають компілятор і підтримують компіляцію шаблонів безпосередньо в браузері. Однак вони збільшать навантаження на ~14 Кб.

Наші налаштування інструментів за промовчанням використовують збірку лише для виконання, оскільки всі шаблони в SFC попередньо скомпільовані. Якщо з якоїсь причини вам потрібна компіляція шаблону в браузері навіть із етапом збірки, ви можете зробити це, налаштувавши інструмент збірки на псевдонім vue на vue/dist/vue.esm-bundler.js.

Якщо ви шукаєте легшу альтернативу для використання без етапів збірки, перегляньте petite-vue.

Підтримка IDE ​

  • Рекомендоване налаштування IDE: VSCode + розширення Vue Language Features (Volar). Це розширення забезпечує підсвітку синтаксису, підтримку TypeScript та інтелектуальну функцію для шаблонних виразів і атрибутів компонентів.

    TIP

    Volar замінює Vetur, наше попереднє офіційне розширення VSCode для Vue 2. Якщо у вас наразі встановлено Vetur, обов’язково вимкніть його в проєктах Vue 3 .

  • WebStorm також забезпечує чудову вбудовану підтримку для Vue SFC.

  • Інші IDE, які підтримують протокол обслуговування мови (LSP), також можуть використовувати основні функції Volar через LSP:

    • Підтримка Sublime Text через LSP-Volar.

    • Підтримка vim / Neovim через coc-volar.

    • Підтримка emacs через lsp-mode

Інструменти розробки браузера ​

Перегляньте безкоштовний урок на Vue School

Розширення браузера Vue devtools дозволяє досліджувати дерево компонентів додатку Vue, перевіряти стан окремих компонентів, відстежувати події керування станом та продуктивність.

знімок екрана інструментів розробки браузера

TypeScript ​

Основна стаття: використання Vue з TypeScript.

  • Volar забезпечує перевірку типів для SFC за допомогою блоків <script lang="ts">, включаючи шаблонні вирази та перевірку реквізитів між компонентами.

  • Використовуйте vue-tsc для виконання перевірки типів з командного рядка або для створення файлів d.ts для SFC.

Тестування ​

Основна стаття: посібник з тестування.

  • Cypress рекомендовано для E2E тестів. Його також можна використовувати для тестування одно-файлових компонентів Vue за допомогою програми Cypress Component Test Runner.

  • Vitest – це програма для тестування, створена членами команди Vue / Vite, яка зосереджена на швидкості. Вона спеціально розроблена для додатків на основі Vite, щоб забезпечити миттєвий зворотний зв'язок для тестування частини/компонента.

  • Jest можна змусити працювати з Vite через vite-jest. Однак це рекомендується, лише якщо у вас є існуючі набори тестів на основі Jest, які потрібно перенести на налаштування на основі Vite, оскільки Vitest надає подібні функції з набагато ефективнішою інтеграцією.

Статичний аналіз ​

Команда Vue підтримує eslint-plugin-vue, плагін ESLint, який підтримує статичний аналіз спеціально для одно-файлових компонентів.

Користувачі, які раніше використовували Vue CLI, можуть звикнути до конфігурації статичного аналізатора за допомогою Webpack. Однак, якщо використовується налаштування збірки на основі Vite, наша загальна рекомендація:

  1. npm install -D eslint eslint-plugin-vue, потім дотримуйтеся посібника з налаштування eslint-plugin-vue.

  2. Налаштуйте розширення IDE ESLint, наприклад ESLint для VSCode, щоб ви отримували повідомлення від статичного аналізатора прямо у своєму редакторі під час розробки. Це також дозволяє уникнути зайвих витрат на перевірку під час запуску сервер розробки.

  3. Запустіть ESLint як частину команди виробничої збірки, щоб отримати повний звіт від статичного аналізатора перед публікацією.

  4. (Необов’язково) Налаштуйте такі інструменти, як lint-staged, щоб автоматично змінювати статично проаналізовані файли під час git коміту.

Форматування ​

  • Розширення VSCode Volar одразу забезпечує форматування для однофайлових компонентів Vue.

  • Крім того, Prettier забезпечує вбудовану підтримку форматування однофайлових компонентів Vue.

Інтеграції з користувацькими блоками SFC ​

Користувацькі блоки компілюються в імпорт до того самого файлу Vue з різними запитами. Обробка цих імпортів залежить від основного інструменту збірки.

  • Якщо використовується Vite, для перетворення відповідних користувальницьких блоків у виконуваний JavaScript слід використовувати спеціальний плагін Vite. Приклад

  • Якщо використовується Vue CLI або звичайний Webpack, то Webpack має бути налаштований на перетворення відповідних блоків. Приклад

Пакети нижнього рівня ​

@vue/compiler-sfc ​

Цей пакет є частиною основного моно репозиторію Vue і завжди публікується з тією ж версією, що й основний пакет vue. Він включений як залежний від основного пакета vue і проксі сервер у vue/compiler-sfc, тому вам не потрібно встановлювати його окремо.

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

TIP

Завжди віддавайте перевагу використанню цього пакета через глибокий імпорт vue/compiler-sfc, оскільки це гарантує, що його версія синхронізується з середовищем виконання Vue.

@vitejs/plugin-vue ​

Офіційний плагін, який забезпечує підтримку однофайлових компонентів Vue у Vite.

vue-loader ​

Офіційний завантажувач, який забезпечує підтримку однофайлових компонентів Vue з Webpack. Якщо ви використовуєте Vue CLI, також перегляньте документацію про зміну параметрів vue-loader у Vue CLI .

Інші онлайн пісочниці ​

Редагувати цю сторінку на GitHub