index.html
項目的運作入口，在body體中隻有一個div标簽，其id為app，這個id将會連接配接到src/main.js内容
在浏覽器打開的瞬間，浏覽器中正文部分會瞬間顯示index.html中定義的正文部分
上面有一個id為app的挂載點，之後我們的Vue根執行個體就會挂載到該挂載點上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>y
</title>
</head>
<body>
<div id="app">test
</div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
入口檔案，主要作用是初始化vue執行個體，并引入所需要的插件。建立了一個vue執行個體，并使用el：#app連結到index.html中的app，并使用template引入元件<app>和路由相關的内容，也就是說通過main.js我們關聯到App.vue元件
import Vue
from
'vue'
import App
from
'./App'
import router
from
'./router'
Vue.config.productionTip =
false
/* eslint-disable no-new */
new Vue({
el:
'#app',
router,
components: { App },
template:
'<App/>' App.vue
主元件，所有頁面都是在App.vue下進行切換的。可以了解為所有的路由router也是App.vue的子元件。
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export
default {
name:
'App'
Index.js
<template>标簽下，有<router-view>标簽，<router-view>标簽将會把路由相關内容渲染在這個地方，路由中檔案位于src/router/index.js中。
在index.js的代碼中，建立了路由相關的内容，也就會渲染到app.vue下面的<router-view>中。
import Vue
from
'vue'
import Router
from
'vue-router'
import HelloWorld
from
'@/components/HelloWorld'
Vue.use(Router)
export
default
new Router({
routes: [
path:
'/',
name:
'HelloWorld',
component: HelloWorld ![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)