The relationship between the vue in main.js, index.html, app.vue file

In the initialization Vue project, we first come into contact with is main.js, index.html, App.vue these three files

main.js --- entry file

index.html --- Home Project Entrance

App.vue --- root component

In the instant browser opens, the browser will instantly display the text body part defined in section index.html

SUMMARY <div id = "app"> index.html body of the </ div>

main.js project file as an entry in main.js, create a Vue example, in Vue example, by

import App from './App.vue'

new view ({
  on: ' #app ' ,
  components: {App },
  template: '<App/>'
})

Examples loaded into position in the index.html;

Next, examples of the component is registered in a local App

Template is the template content component App.vue in, template will replace the original content at the mount point

Summary: In the project operation, main.js as the entrance of the project file, run, find examples of the need to mount position, namely index.html in the beginning, at the contents of index.html mount point will be displayed but then it was replaced by the contents of instances of components in the template, so we'll see for a moment will display the contents of index.html in the body.

The Title index.html in part will not be replaced, it will remain.