Руководство

Однофайловые компоненты

Введение

Во многих проектах, глобальные компоненты определяются посредством Vue.component, с последующим new Vue({ el: '#container' }) для указания элемента-контейнера в теле каждой страницы.

Для проектов малого и среднего размера, в которых JavaScript используется лишь для некоторых страниц, этот подход может прекрасно работать. В более же сложных проектах или в случаях, когда весь ваш фронтенд управляется JavaScript, явными становятся следующие недостатки:

Все эти недостатки решаются однофайловыми компонентами с расширением .vue, использование которых позволяют такие инструменты как Webpack и Browserify.

Вот простой пример файла, который мы назовём Hello.vue:

Пример однофайловых компонентов

Мы получили:

Как и обещалось, мы также можем использовать препроцессоры, такие как Pug, Babel (с модулями ES2015) и Stylus для создания более ясных и функциональных компонентов.

Пример однофайлового компонента с пре-процессорами

Перечисленные языки даны только для примера. С тем же успехом можно использовать Buble, TypeScript, SCSS, PostCSS — или любые другие пре- или постпроцессоры по вкусу. При использовании Webpack вместе с vue-loader, вы также получаете прекрасную поддержку CSS-модулей.

Что насчёт разделения ответственности?

Одна важная вещь, что следует отметить — разделение ответственности это не то же самое, что разделение на файлы по типу. В современной разработке UI мы обнаружили, что вместо разделения кодовой базы на три огромных слоя, что тесно переплетаются друг с другом, имеет больше смысла делить их на слабо связанные компоненты и компоновать уже их. Внутри компонента, его шаблон, логика и стили неразрывно связаны между собой, что позволяет сделать компонент более сплочённым и удобным в поддержке.

Если вам не нравится идея однофайловых компонентов, вы также можете пользоваться возможностями горячей замены модулей и прекомпиляцией, выделив JavaScript и CSS в отдельные файлы:

<!-- my-component.vue -->
<template>
  <div>Это будет предварительно скомпилировано</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Начало работы

Песочница с примером

Если вы хотите прямо сейчас поиграться с однофайловыми компонентами — начните с этого простого todo приложения на CodeSandbox.

Для новичков в модульных системах сборки JavaScript

С .vue-компонентами, мы входим во вселенную продвинутых JavaScript-приложений. Это значит, что если вы этого ещё не сделали, нужно будет освоить некоторые дополнительные инструменты:

После того как вы уделили время этим ресурсам, мы советуем вам посмотреть на Vue CLI 3. Следуйте инструкциям, и очень скоро у вас будет рабочий проект с .vue-компонентами, ES2015, Webpack и горячей перезагрузкой модулей.

Для продвинутых пользователей

CLI позаботится о большинстве настроек конфигурации сборки для вас, но при необходимости позволяет настроить любые детали через опции конфигурации.

Если вы предпочитаете создавать конфигурацию сборки с нуля, то необходимо вручную настроить webpack для работы с vue-loader. Чтобы узнать больше о webpack, обратитесь к его официальной документации и Webpack Academy.

← Фильтры Модульное тестирование →
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!