Vue.js

# Инструментарий SFC

# Онлайн песочницы

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

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

# Создание проекта

# Vite

Vite (opens new window) — лёгкий и быстрый инструмент для сборки с отличной поддержкой однофайловых компонентов Vue. Его создал Эван Ю, который также является автором самого Vue! Чтобы начать работу с Vite + Vue, просто запустите команду:

npm init vite@latest
1

После этого выберите шаблон Vue и следуйте инструкциям.

Песочница SFC (opens new window) также поддерживает загрузку файлов в виде проекта Vite.

# Vue CLI

Vue CLI (opens new window) — официальный инструмент для сборки на основе webpack для проектов Vue. Чтобы начать работу с Vue CLI выполните команды:

npm install -g @vue/cli
vue create hello-vue
1
2

# Vite или Vue CLI?

Рекомендуем начинать новые проекты с Vite, поскольку он предоставляет лучший опыт для разработки с точки зрения времени запуска сервера для разработки и производительности горячей перезагрузки модулей (подробности (opens new window)). Переходите на Vue CLI только в случае, если полагаетесь на специфические функции webpack (например, Module Federation).

При использовании Rollup (opens new window), можно смело брать Vite, поскольку он использует Rollup для production сборок и поддерживает совместимую с Rollup систему плагинов. Даже разработчик Rollup рекомендует Vite в качестве обёртки Rollup для веб-разработки (opens new window).

# Поддержка IDE

Рекомендуем использовать IDE VSCode (opens new window) + расширение Volar (opens new window). Volar предоставляет подсветку синтаксиса и улучшенный IntelliSense в выражениях шаблонов, входных параметров компонентов и даже валидации слотов. Настоятельно рекомендуем эту пару, если хотите получить наилучший возможный опыт работы с однофайловыми компонентами Vue, особенно если также используете TypeScript.

WebStorm (opens new window) также предоставляет достойную поддержку однофайловых компонентов Vue. Однако, обратите внимание, что поддержка <script setup> пока ещё находится в стадии разработки (opens new window).

Большинство других редакторов имеют созданную сообществом поддержку синтаксиса Vue, но не имеют такого же уровня IntelliSense для кода. В перспективе надеемся, что сможем расширить диапазон поддержки редакторов, за счёт использования Language Service Protocol (opens new window) поскольку основная логика Volar реализована в виде стандартного языкового сервера.

# Поддержка тестирования

  • При использовании Vite рекомендуем Cypress (opens new window) в качестве программы для запуска тестов, как модульных так и e2e-тестов. Модульные тесты для однофайловых компонентов Vue могут выполняться с помощью Cypress Component Test Runner (opens new window).

  • Vue CLI поставляется с интеграциями для Jest (opens new window) и Mocha (opens new window).

  • При самостоятельной настройке Jest для работы с однофайловыми компонентами Vue, ознакомьтесь с vue-jest (opens new window) — официальный модуль преобразования однофайловых компонентов Vue для Jest.

# Интеграция пользовательских секций

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

  • При использовании Vite следует использовать пользовательский плагин Vite для преобразования сопоставленных пользовательских секций в исполняемый JavaScript. [Пример (opens new window)]

  • При использовании Vue CLI или webpack необходимо настроить загрузчик webpack для преобразования пользовательских секций. [Пример (opens new window)]

# Низко-уровневые инструменты

# @vue/compiler-sfc

Этот пакет является частью моно-репозитория ядра Vue и всегда публикуется с такой же версией, что и основной пакет vue. Как правило, он будет указан как peer dependency от vue в проекте. Чтобы обеспечить корректное поведение, его версия всегда должна соответствовать версии vue — т.е. каждый раз при обновлении версии vue, необходимо также обновить @vue/compiler-sfc чтобы снова соответствовать ей.

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

# @vitejs/plugin-vue

Официальный плагин, предоставляющий поддержку однофайловых компонентов Vue в Vite.

# vue-loader

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

← <script setup> →