引自：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。這里只是對我們運行項目后，如何出現首頁面做了簡單的解釋，對具體的實現沒有進行分析。