Я уже давно знаю 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>
Если не сложно, дайте пожалуйста более подробный ответ на вопрос. Может кто-то ещё интересуется этой темой. Спасибо