当index.html或,index.ejs作为第一个页面被加载时,会加载我们的主main.js(不管你这的名字取的是什么,总会有一个主js文件),一般会有如下代码:
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的实例在<div id="app"></div>
这个标签的范围内有效。router将会匹配第一个出现的 <router-view></router-view>并替换它。