當(dāng)index.html或,index.ejs作為第一個(gè)頁(yè)面被加載時(shí),會(huì)加載我們的主main.js(不管你這的名字取的是什么,總會(huì)有一個(gè)主js文件),一般會(huì)有如下代碼:
new Vue({
components: { App },
router,
store,
template: '<App/>'
}).$mount('#app')
而index.html一般如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>APP</title>
<% if (htmlWebpackPlugin.options.nodeModules) { %>
<!-- Add `node_modules/` to global paths so `require` works properly in development -->
<script>
require('module').globalPaths.push('<%= htmlWebpackPlugin.options.nodeModules.replace(/\\/g, '\\\\') %>')
</script>
<% } %>
</head>
<body>
<div id="app"></div>
<!-- Set `__static` path to static files in production -->
<script>
if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>
<!-- webpack builds are automatically injected -->
</body>
</html>
那么Vue的實(shí)例在<div id="app"></div>這個(gè)標(biāo)簽的范圍內(nèi)有效。router將會(huì)匹配第一個(gè)出現(xiàn)的 <router-view></router-view>并替換它。