使用vue-cli创建vue工程：https://blog.csdn.net/calmreason/article/details/82720355
结论：本篇文章告诉你由vue-cli构建的单页面应用的工程结构和页面结构以及交互原理。
本篇文章中不包括多组件传递数据需要的Vuex 2018-10-12更
下面就来对这个典型的自动生成的工程进行介绍。
这个工程可以说麻雀虽小五脏俱全，留给你足够丰富的扩展可能，同时对Vue全家桶的用法又足够的标准，可以说是难得的一个Demo，必须好好分析。百度网盘下载
分析这个工程需要不少Vue全家桶成员的了解，相关的基础作者以及做了初步了解，现在有能力来解剖这个工程了。文中会把需要的知识点的连接接过来，让你省心。
先来看看工程文件的结构：
下面从一次用户访问主页来介绍中间都发生了什么
首先，用户访问：http://localhost:8080
这个地址会自动变成：http://localhost:8080/#/
也就是下面的样子：
首页分析：
1 首页为何与官网DEMO不同：这个文件显示的和官方的显示略有不同，我特意为了显示开发文件关系将所有显示文本的地方改成了代码所在工程中的位置。
2 首页的标题：从上图可以看出，这个页面的标题是index.html，也就是说这个页面呈现的HTML文件实际上是index.html这个文件本身。我在index.html里面把标题部分改成了：<title>index.html</title>
3 从首页正文一开始的“index.html body”是我加入到index.html文件中的：<body> <div>index.html body</div>。。。。。
4 首页中的Welcome to HelloWorld.vue来自于一个叫HelloWorld.vue的单文件组件SFCs 。
5 单文件组件的内容是：template（构成HTML骨架） 、script（数据交互事件响应）、style scoped（受限作用域的CSS样式）
6 组件内嵌：单文件组件中的内容可以作为一个页面中的一部分，而不需要是一个完整的页面。通常单文档应用都是这么处理的，页面的变化是由不同的组件渲染出来的，而不需要实际意义上的页面跳转。
我们来看一下HelloWorld.vue里面有哪些内容：
<template>
<div class="hello">
<h5>{{ msg }}</h5>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to HelloWorld.vue'
}
}
}我们可以看到HelloWorld.vue这个组件只负责在显示Welcome to HelloWorld.vue。并且，这个内容嵌入到了首页index.html中了。
7 首页的全部内容：
从上图我们看出，首页的内容一部分来自index.html，一部分来自App.vue，一部分来自Helloworld.vue。够全的啊！
我们继续修改demo，我们知道Vue工程离不开new Vue对象的创建。Vue对象是在main.js中创建的，这个文件什么时候执行暂时不作考虑，我们看看这个文件的内容：
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实例。其中Vue构造函数的参数有el、router、components、template。
1）el 指定了DOM的哪个元素将会被绑定（被Vue替换并渲染成全新的内容）
2）router是一个vue-router路由对象，负责在路由变化的时候使用对应的组件渲染页面，从而在不发生实际意义上的页面跳转的情况下变化当前页面的结构和内容。当用户点击 router-link 页面上的一个按钮或者超链接：
<router-link to="/list">List</router-link>
时，会去寻找它的 to 属性， 它的 to 属性和 js 中配置的路径{ path: '/', component: Helloworld} path 一 一 对应，从而找到了匹配的组件， 最后把组件渲染到 <router-view> 标签所在的地方。
3） 我们来看看router-view在哪里：
也就是说，主页的结构是：index.html里面包含了App.vue；App.vue里面包含了所有vue-router管理的子页面；子页面里面当用户输入localhost:8080/的时候用HelloWorld.vue组件渲染；HelloWorld.vue的内容就是现实一句话：Welcome to HelloWorld.vue
8 页面切换与组件切换：当页面链接是一个外部链接，比如链接到了www.google.com.hk，那么页面就会发生真正的跳转；当页面链接指向了一个*.vue组件时，不发生页面跳转，而是通过显示和隐藏router-view元素的内容来达到切换页面的效果。