Vue SFC архитектура

Компоненты являются строительными блоками большинства современных фреймворков. В
в целом, разделение вашего кода на фрагменты, специфичные для компонентов, гарантирует, что код
будет читабельным и реализует принцип «Не повторяйся» (DRY).

Шаблон Vue SFC точно следует этому подходу.

Архитектура SFC централизует ответственность как за внешний вид, так и за
поведение в один файл, что упрощает архитектуру вашего проекта.
Теперь вы можете ссылаться на свою логику HTML, CSS и JavaScript без
переключение файлов. Ваша файловая структура .vue по умолчанию будет следующей:

<template>
  <div> <!-- HTML code --> </div>
</template>

<script>
  export default{
    // javascript code
  }
</script>

<style>
  /* css code*/
</style>

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

// logo.vue
<template>
  <img src="myLogo.png" />
</template>

В header.vue вы импортируете компонент логотипа в раздел script и
затем включите его как вложенный компонент компонента заголовка. Вы можете
добиться этого, объявив его как свойство поля components:

// header.vue
<script>
  import logo from 'components/logo.vue'
  export default {
    components: {
      logo
    }
  }
</script>

В разделе template вы можете использовать логотип как обычный элемент HTML,
как показано здесь:

<template>
  <header>
    <a href="mywebsite.com">
    <logo />
    </a>
  </header>
</template>

На выходе будет заголовок с отрендеренным изображением логотипа — и вы можете
при необходимости повторно используйте компонент логотипа в любом другом компоненте.

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