Vue.js

Оформление

Оглавление

Инструменты ​

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

Чтобы опробовать Vue SFC, не нужно ничего устанавливать в системе — есть онлайн-площадки, которые позволяют сделать это прямо в браузере:

  • Песочница Vue SFC
    • Всегда развёртывается из последнего коммита
    • Предназначена для проверки результатов компиляции компонентов
  • Vue + Vite на StackBlitz
    • IDE-подобная среда, работающая с актуальным dev-сервером Vite в браузере
    • Ближе всего к локальной установке

Также рекомендуется использовать эти онлайн-площадки для предоставления репродукций при сообщении об ошибках.

Заготовка проекта ​

Vite ​

Vite — это лёгкий и быстрый инструмент для сборки с первоклассной поддержкой однофайловых компонентов Vue. Его создал Эван Ю, который также является автором Vue!

Чтобы начать работу с Vite + Vue, просто запустите команду:

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

Эта команда установит и выполнит create-vue, официальный инструмент для создания заготовок для проектов Vue.

  • Чтобы узнать больше о Vite, ознакомьтесь с документацией Vite.
  • Чтобы настроить специфическое для Vue поведение в проекте Vite, например, передать опции компилятору Vue, ознакомьтесь с документацией для @vitejs/plugin-vue.

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

Vue CLI ​

Vue CLI — официальный инструментарий на основе webpack для Vue. Сейчас он находится в режиме обслуживания, и мы рекомендуем начинать новые проекты с Vite, если только вы не полагаетесь на специфические функции, доступные только в webpack. В большинстве случаев Vite обеспечивает превосходный опыт разработчиков.

Для получения информации о переходе с Vue CLI на Vite:

Примечание о компиляции шаблонов в браузере ​

При использовании Vue без этапа сборки шаблоны компонентов записываются либо непосредственно в HTML страницы, либо в виде встроенных строк JavaScript. В таких случаях Vue необходимо поставлять компилятор шаблонов в браузер, чтобы выполнять компиляцию шаблонов «на лету». С другой стороны, компилятор будет не нужен, если мы предварительно скомпилируем шаблоны на этапе сборки. Чтобы уменьшить размер клиентского пакета, Vue предоставляет различные «сборки», оптимизированные для разных случаев использования.

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

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

В наших настройках инструментов по умолчанию используется сборка только во время выполнения, поскольку все шаблоны в SFC предварительно скомпилированы. Если по каким-то причинам вам нужна компиляция шаблонов в браузере даже с шагом сборки, вы можете сделать это, настроив инструмент сборки так, чтобы вместо псевдонима vue был указан vue/dist/vue.esm-bundler.js.

Если вы ищете более лёгкую альтернативу для использования без этапа сборки, обратите внимание на petite-vue.

Поддержка IDE ​

  • Рекомендуемая настройка IDE — VS Code + расширение Vue Language Features (Volar). Расширение обеспечивает подсветку синтаксиса, поддержку TypeScript и intellisense для шаблонных выражений и параметров компонентов.

    Совет

    Volar заменяет Vetur, наше предыдущее официальное расширение VS Code для Vue 2. Если у вас установлен Vetur, не забудьте отключить его в проектах Vue 3.

  • WebStorm также обеспечивает отличную встроенную поддержку однофайловых компонентов Vue.

  • Другие IDE, поддерживающие Протокол языковой службы (LSP), также могут использовать основные функции Volar через LSP:

    • Поддержка Sublime Text с помощью LSP-Volar.

    • Поддержка vim / Neovim с помощью coc-volar.

    • Поддержка emacs с помощью lsp-mode

Инструменты разработчика в браузере ​

Расширение 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. Установите расширения ESLint для IDE, например ESLint для VS Code, чтобы получать обратную связь от линтера прямо в редакторе во время разработки. Это также позволяет избежать лишних затрат на линтинг при запуске dev-сервера.

  3. Запустите ESLint как часть команды сборки, чтобы получить полную обратную связь от линтера перед отправкой в продакшен.

  4. (Необязательно) Настройте такие инструменты, как lint-staged, для автоматической перелинковки изменённых файлов при фиксации git.

Форматирование ​

  • Расширение Volar VS Code предоставляет форматирование для Vue SFC из коробки.

  • В качестве альтернативы Prettier обеспечивает встроенную поддержку форматирования Vue SFC.

Интеграция пользовательских блоков SFC ​

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

  • Если вы используете Vite, то для преобразования сопоставленных пользовательских блоков в исполняемый JavaScript следует использовать специальный плагин Vite. Пример

  • Если вы используете Vue CLI или обычный webpack, необходимо настроить загрузчик webpack для преобразования согласованных блоков. Пример

Пакеты нижнего уровня ​

@vue/compiler-sfc ​

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

Сам пакет предоставляет низкоуровневые утилиты для обработки Vue SFC и предназначен только для авторов инструментария, которым необходимо поддерживать Vue SFC в пользовательских инструментах.

Совет

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

@vitejs/plugin-vue ​

Официальный плагин, обеспечивающий поддержку Vue SFC в Vite.

vue-loader ​

Официальный загрузчик, обеспечивающий поддержку Vue SFC в webpack. Если вы используете Vue CLI, также смотрите Документацию по изменению опций vue-loader во Vue CLI.

Другие онлайн-песочницы ​

Редактировать эту страницу на GitHub