index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>hello-vue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.html 作用其實跟一般網頁一樣，<title>或<meta>都可在此設定，唯一不同的是不需要在先載入 js 或 css 檔案，因為在開發或是打包後，webpack 會自動將 js 或 css 檔案添加至此，變成最終可視的 HTML。
<body>裡則僅是簡單定義了一個 <div id="app"></div>，如果熟悉 Vue 的話其實不難理解它是被綁定的渲染區域，簡言之就是接下來的設定及元件都會渲染在 #app 內。
如果還是很抽象的話，可搭配下面的概念圖一起看，也可以把 index.html 想成是單一入口，就算搭配 vue-router 做頁面切換，所有元件都還是在#app裡渲染，<head></head>不會因為切換頁面就跟著重新讀取，所以單頁應用程式相對來說 SEO 是會比較受限的。