Проблема со сборкой в Vue Cli

Я уже давно знаю html css js, привык к определенной структуре папок, к подключению библиотек через cdn. Но недавно приступил к изучению vue. Я использую vue-cli.

Описание вопроса: я не понимаю, как присоединяются компоненты vue к index.html (точка входа), зачем-то vue записывает все компоненты в js файл, которые после рендерятся браузером. Но если посмотреть на итоговый index.html там вообще ничего нет. Хотя в документации vue говорится, что компоненты – основной принцип работы фреймворка. Также я анализировал некоторые сайты написанные с использованием vue, у всех главный (index.html) файл наполнен контентом изначально. А vue-cli пихает это все в js файл.

Вопрос: Почему это происходит? Какие настройки нужно включить в vue.config.js, чтобы все компоненты также собирались в index.html?

Вот какой index.html получается в итоге

Итоговая сборка проекта

Компонентов достаточно много, но почему-то index.html почти пустой

Вот для сравнения index.html с сайта behance.net в этом очень много строк и его не назовешь пустым

файл main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;


new Vue({
  el: "#app",

  render: h => h(App)
});

файл App.vue

<template>
  <div id="app">
    <BeginPresentation/>
    <Tables/>
    <EndForm/>
  </div>
</template>

<script>
  import BeginPresentation from './components/BeginPresentation/BeginPresentation.vue'
  import Tables from './components/Tables/Tables'
  import EndForm from './components/EndForm/EndForm';



  export default {
    name: 'App',

    data: function(){
      return {

      }
    },

    components: {
      BeginPresentation,
      Tables,
      EndForm
    }
  }
</script>

<style lang="sass">
  @import "./main.sass"
</style>

Если не сложно, дайте пожалуйста более подробный ответ на вопрос. Может кто-то ещё интересуется этой темой. Спасибо