Какова связь между App.vue и index.html? - PullRequest
Новая
       1

Какова связь между App.vue и index.html?

1 голос
/ 14 июня 2019

Я создал скаффолд приложения, используя vue-cli.Не существует четкого объяснения (AFAICT), которое показывает взаимосвязь между сгенерированными файлами: App.vue и index.html.

Из полученных страниц видно, что index.html содержит HTML-код, сгенерированный из App.vue.Однако оба вышеупомянутых файла имеют HTML с элементом div, имеющим id="app".Какова цель каждого из этих файлов?и почему у них обоих есть элемент с одинаковым идентификатором, поскольку предполагается, что идентификатор элемента является уникальным идентификатором в документе?

/ public / index.html 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>sample</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but sample doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

/src / App.vue 

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

1 Ответ

0 голосов
/ 14 июня 2019

Это 

new Vue({
  render: h => h(App)
}).$mount("#app");

отображает App компонент в #app элемент DOM, т. Е. Заменяет <div id="app"></div>, указанный в index.html, на App представленный шаблон.

Это может быть <div id="app"></div> в index.html и <div id="rendered-app"></div> в App.vue <template>. То, что как index.html, так и App.vue содержат <div id="app"></div>, не является обязательным требованием, но это имеет смысл, поскольку заменяется оригинальный div и гарантируется, что есть только один элемент с app id.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...