一、总结
一句话总结：
1、index.html-主页，项目入口；
2、App.vue-根组件；
3、main.js-入口文件
4、index.js 设置路由–名字和资源映射起来，渲染到App.vue
在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。
1、index.html中id为app的div标签怎么解释好表达？
挂载点：index.html中id为app的div标签是一个挂载点，之后我们的Vue根实例就会挂载到该挂载点上
二、关于Vue中main.js，App.vue，index.html之间关系进行总结
转自或参考：关于Vue中main.js，App.vue，index.html之间关系进行总结
https://www.cnblogs.com/chenleideblog/p/10484554.html
在初始化的Vue项目中，我们最先接触到的就是main.js，App.vue，index.html这三个文件，我们从培训视频或者官方文档上可以了解到：
- index.html—主页，项目入口
- App.vue—根组件
- main.js—入口文件
那么这几个文件之间的联系如何呢？
1.先看index.html中的内容：（为了很好的标识各个文件，我对各文件进行了文字标记）
2.在App.vue中，我做了如下处理：
3.在main.js中，文件初始内容如图：
那么我们打卡的网页如何呢？
网页效果如下：
也就是说，在网页的Title部分，加载了index.html中定义的Title，而在正文部分，加载了App.vue中定义的部分。（但是需要注意的是，在浏览器打开的瞬间，浏览器中正文部分会瞬间显示index.html中定义的正文部分）
那么，我们就可以来分析上述的逻辑了，浏览器访问项目，最先访问的是index.html文件，
而index.html中
<div id="app">来自index.html正文中的内容</div>
上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上；
main.js作为项目的入口文件，在main.js中，新建了一个Vue实例，在Vue实例中，通过
new Vue({
el: '#app',
//components: {
App },
//template: '<App/>'
})
告诉该实例要挂载的地方；（即实例装载到index.html中的位置）
接着，实例中注册了一个局部组件App，这个局部组件App来自于哪儿呢？
import App from './App.vue'
new Vue({
//el: '#app',
components: {
App },
//template: '<App/>'
})
这个局部组件是当前目录下的App.vue；
而起模板是什么呢？模板就是组件App.vue中的template中的内容。（template会替代原来的的挂载点处的内容）
所以Vue这个实例就是暂时的是App.vue这个组件的内容。
所以，我们进行总结：
在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。
而index.html中的Title部分不会被取代，所以会一直保留。
https://www.cnblogs.com/Renyi-Fan/p/11109763.html
总结
一开始在学习Vue中，总是理解不清楚各文件之间的逻辑，所以导致自己一直在原地徘徊，在自己尝试了微信小程序的开发之后，大致有了一个模糊的分时，反过头来继续从事Vue项目的开发，结果原来理不清的东西都豁然开朗了。
在根目录下存在index.html文件，在src目录下存在main.js，App.vue以及在router文件夹下存在index.js，搞清楚这几个文件之间的关系将对后续开发理清思路。
index.html—主页，项目入口
index.html为项目访问的首站点，一般我们之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点下，内容都通过vue组件来进行填充。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页title</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue—根组件
我们在Vue中要经常建立后缀名为.vue的文件，.vue的文件通常由三部分构成，分别用，与标签包裹。
我们可以将上述三个部分理解为原来我们学习前端的html，javascript与css三个部分。
其中，通常建立我们要用的网页界面，通常与数据打交道，定义数据的首发方式等，面向逻辑，而主要负责标签中的样式。
上面三者的结合，就构成了我们所见到的网页，一般我们在开发新的页面中一般是建立一个新的.vue文件，在文件中完成三个环节的编写。
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "app"
};
</script>
<style>
.add-container {
margin-bottom: 20px;
}
</style>
补充：
- 【template】
其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上图，父节点为#app的div，其没有兄弟节点）
是子路由视图，后面的路由页面都显示在此处
打一个比喻吧，类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示
- 【script】
vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。
- 【style】
样式通过style标签
如要引入外部css文件，首先需给项目安装css-loader依赖包，打开cmd，进入项目目录，输入npm install css-loader,回车。安装完成后，就可以在style标签下import所需的css文件。这样，我们就可以把style下的样式封装起来，写到css文件夹，再引入到页面使用，整个vue页面也看上去更简洁。
<style>
import './assets/css/public.css'
</style>
main.js—入口文件
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例，下图中的
components:{App}就是引入的根组件App.vue
后期还可以引入插件，当然首先得安装插件。
import Vue from 'vue' /*引入vue框架*/
import ElementUI from 'element-ui' /*引入element-ui样式*/
import App from './App' /*引入根组件*/
import router from './router' /*引入路由设置*/
Vue.config.productionTip = false /*关闭生产模式下给出的提示*/
/*定义一个新实例*/
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App } /*此处为引入的根组件的App.vue*/
})
router.js—路由配置
在router文件夹下，有一个index.js文件，即为路由配置文件。
import Vue from 'vue' /*引入vue框架*/
import Router from 'vue-router' /*引入路由依赖*/
import Hello from ‘@、components/Hello’ /*引入页面组件，命名为Hello*/
Vue.use(Router) /*使用路由依赖*/
/*定义路由*/
export default new Router({
router:[
{
path: '/ ',
name: 'Hello',
component: Hello
}
]
})
这里定义了路径为’/‘的路由，该路由对应的页面是Hello组件，所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件.类似的，我们可以设置多个路由，‘/index’,’/list’之类的，当然首先得引入该组件，再为该组件设置路由。