Платиновый спонсор
Поддержите Vue.js

Guide

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

Введение

Во многих проектах, глобальные компоненты определяются посредством 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>

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

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

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

После того как вы уделили время этим ресурсам, мы советуем вам посмотреть на шаблон webpack-simple. Следуйте инструкциям, и очень скоро у вас будет рабочий проект с .vue-компонентами, ES2015 и hot-reloading.

Этот шаблон использует Webpack — сборщик, соединяющий набор “модулей” в результирующее приложение. Чтобы узнать больше о самом Webpack, ознакомьтесь с их официальной документацией и Webpack Academy.

В Webpack каждый модуль может быть подвергнут трансформации загрузчиком (“loader”) перед включением в сборку. Vue предоставляет плагин vue-loader для трансляции однофайловых .vue-компонентов. Шаблон webpack-simple содержит уже настроенный проект, но если вы хотели бы узнать больше о том, как работают .vue-компоненты в связке с Webpack, можно почитать документацию vue-loader.

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

Независимо от того, Webpack или Browserify вы предпочитаете, у нас есть хорошо документированные шаблоны как для простых, так и для более сложных проектов. Мы советуем вам выбрать подходящий для вас шаблон на github.com/vuejs-templates, и, следуя инструкциям в README, создать проект с помощью vue-cli.

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