Компоненты одного файла

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

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

• Глобальные определения заставят уникальные имена для каждого компонента
• В строковых шаблонах обычно отсутствует подсветка синтаксиса, и для многострочного HTML потребуются ужасные косые черты.
• Отсутствие поддержки CSS означает, что, хотя HTML и JavaScript объединены в компоненты, CSS будет заметно опущен
• Ни один шаг сборки не ограничивает нас только HTML и ES5 JavaScript, а не препроцессорами, такими как Pug (ранее Jade) и Babel.

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

Пример файла показан в приветствии. Значение:

greeting.vue

<template>
   <p>{{greeting}} World</p>
</template>
<script>
Module.exports = {
Data:function(){
  Return {
	greeting:?Hi?
  }
}
</script>
<style scoped>
p{
     font-size:2em;
     Text-align:center;
    }
</style>

Тогда мы получим:

• Полная подсветка синтаксиса
• CommonJS модули
• CSS с компонентной областью

Как и обещали, препроцессоры, такие как Babel, Pug и Stylus для более богатых компонентов и чистых средств.

greeting.vue

<template lang=?jade?>
 div
    p {{greeting}}World!
     Other-component
  </template>
<script>
 import OtherComponent from ?./OtherComponent.vue?
export default{
data(){
    return{
    greeting: ?Hello?
   }  
},
components:{
      otherComponent
  }
}
</script>
<style lang=?stylus? scoped>
p 
   font-size 2em
    text-align center
</style>

Языки (например, нефрит и стилус) являются лишь примерами. Мы можем использовать Buble, TypeScript, PostCSS, SCSS или любой другой процессор, который может сделать еще один более производительный.

Как насчет разделения проблем?

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

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

<!-- my-component.vue -->
<template>
  <div>This is going to be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Начиная

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

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

• Node Package Manager (NPM).
• Современный JavaScript с ES2015 / 16: чтобы работать с компонентом .vue, нужно быть уверенным с ES2015 / 2016, это не значит запомнить все, но, по крайней мере, оставить ссылку на страницу.

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

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

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

В случае, если мы предпочитаем настраивать нашу собственную сборку с нуля, нам нужно вручную настроить веб-пакет с помощью vue-loader.