鍍金池/ 問答/HTML/ vue-cli新的webpack模板問題

vue-cli新的webpack模板問題

正在學(xué)習(xí)vue中，在用vue-cli安裝webpack模板里，發(fā)現(xiàn)目錄還有一些代碼都和教程不太一樣，有些不理解的地方，在index.html里是

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

在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: '#page',
  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>

在這里el不是指向我index.html頁面中的#page的div嗎？為什么編譯運(yùn)行完之后我在控制臺(tái)看到的html結(jié)構(gòu)沒有#page這個(gè)div而是#app的div？

回答
編輯回答
純妹

el 選取 #page 替換為 <App /> 渲染為 app.vue 組件。

2017年6月8日 19:00
編輯回答
枕頭人

template: '<App/>' 就表示用App組件替換index.html里面的<div id="page"></div>

2018年4月18日 12:41
編輯回答
下墜
{
  el: '#page',
  router,
  components: {
    App
  },
  template: '<App/>'
}

這里使用template,template就是模板引擎，在vue中，這樣使用的話會(huì)把頁面中的#page（包括id='page'這個(gè)標(biāo)簽）替換成template的內(nèi)容。

2017年6月30日 04:09