New webpack template issues for vue-cli

is learning vue. In installing the webpack template with vue-cli, I found that some code in the directory is different from the tutorial. Some things I don"t understand are

in index.html.
  <body>
    <div id="page"></div>
    <!-- built files will be auto injected -->
  </body>

is

in main.js
import Vue from "vue";
import App from "./App";
import router from "./router";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "-sharppage",
  router,
  components: {
    App
  },
  template: "<App/>"
});

app.vue

<template>
  <div id="app">
    <div class="header">
      I am header!
    </div>
    <div class="tab">
      I am tab!
    </div>
    <div class="content">
      I am content!
    </div>
  </div>
</template>

isn"t el pointing to the div of-sharppage in my index.html page here? Why is it that the html structure that I saw on the console after the compilation was run is not the div of-sharppage but the div? of-sharpapp?

Mar.10,2021

el Select -sharppage and replace it with < App / > render as app.vue component.


template:'< App/ > 'means to replace < div id= "page" > < / div >


in index.html with App components.
{
  el: '-sharppage',
  router,
  components: {
    App
  },
  template: '<App/>'
}

template,template is the template engine used here, and in vue, this will replace the-sharppage (including the id='page' tag) in the page with the content of template.

Menu