淺談vue中index.html、main.js、App.vue、index.js之前的關係以及載入過程
引自：https://blog.csdn.net/qq_34182808/article/details/86690193
前序
承接上一遍“通過webpack構建vue專案”構建的專案檔案，簡單闡述一下當我們構建完成後，vue專案中的index.html、main.js、App.vue、index.js的執行載入過程，以及首介面是如何出現的，逐步瞭解vue專案，針對剛開始接觸vue，不知道vue專案如何載入的小白，大神請繞過。
簡介
專案部署完成後的專案結構以及解釋如下圖所示
專案執行
專案的執行入口index.html
為什麼index.html是專案的入口以及為什麼index.html載入後會繼續載入main.js、App.vue、index.js，以及他們之間的關係是如何聯絡起來的呢，這塊的配置檔案位於build資料夾下，包括webpack.dev.conf.js等，感興趣的可以瞭解下。通過專案的配置檔案，可以載入執行我們的index.html檔案以及自動關聯vue相關的模組。
首先我們來看一下index.html中的內容
<!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"></div>
<!-- built files will be auto injected -->
</body>
</html>
在body體中只有一個div標籤，其id為app,這個id將會連線到src/main.js內容，接著我們看一下main.js中的主要的程式碼
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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/>'
})
在main.js中，新建了一個vue例項，並使用el：#app連結到index.html中的app，並使用template引入元件<app>和路由相關的內容（具體的涉及到vue的語法規則，如果不理解的先記下來吧，繼續往後看，等了解vue的相關內容後，可能會更清晰）。也就是說通過main.js我們關聯到App.vue元件，接著，我們繼續看一下App.vue元件中的內容。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
看一下App.vue中的內容，是一個標準的App.vue模板的形式，包含了<template></template>、<script></script>、<style></style>三部分，從template標籤中可以看到，使用img標籤載入了vue的影象，也就是我們使用npm run dev執行vue專案後看到的影象，那麼影象下面的內容是從哪裡渲染出來的呢？
我們注意到，<template>標籤下，除了<img>標籤外，還有<router-view>標籤，<router-view>標籤將會把路由相關內容渲染在這個地方，接下來，我們看一下路由的內容有哪些，在哪裡出現的。其實，這個檔案位於src/router/index.js中，我們看一下index.js中的程式碼
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
}
]
})
在index.js的程式碼中，建立了路由相關的內容，也就會渲染到app.vue下面的<router-view>中。在index.js中，將helloworld元件釋出為路由，換句說，index.js在這裡就是將helloword釋出為路由，以在圖片下面進行展示helloword內容，接下來我們再看看components/helloword中的內容是啥(由於裡面的內容比較多，這裡我們只截取了template中的內容)。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
在helloworld.vue的template中，我們可以看到介面上渲染的一些連線等內容。到此，這個頁面的載入渲染過程結束了。
總結
通過上述過程，我們可以看到專案載入的過程是index.tml->main.js->app.vue->index.js->helloworld.vue。這裡只是對我們執行專案後，如何出現首頁面做了簡單的解釋，對具體的實現沒有進行分析。