为什么需要组件拆分呢？这样才能更符合模块化这样一个理念。
首先是index.html,代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>sell</title> <link rel="stylesheet" type="text/css" href="static/css/reset.css"> </head> <body> <div id="app"></div> <-----------------------------------------这里才是有用的哦，记住这里，这是一个div，id='app' 这里是 A </body> </html>
app.vue文件：
<template> <div id="aaa"> <!------------------------------------------------------这里也要多注意下哦，稍后解释 这里是 B <div class="header"> im header </div> <div class="container"> im container </div> <div class="footer"> im footer </div> </div> </template> <script> </script> <style> </style>
main.js文件
import Vue from 'vue';
import App from './App';
/*eslint-disable no-new*/
new Vue({
el:'#app', <!----------------------------------这里和下面一行都蛮重要的 这里是 C
render: h => h(App) <!----------------------------------还有这里哦 这里是 D
})
好，先让我们看一下这么写的效果和最后呈现在HTML的结构是什么样的（太简单了，我怕你们打我。。。。）
我脑子笨，你们原谅我连这点都想不明白，我刚开始就在纠结这三个问题。
1.index.html里面的那个带id#app的div，为什么不会出现在dom结构里？
2.index.html里面的那个带id#app的div,它与app.vue里面的id=‘#aaa’的div有什么关系？
3.为什么在main.js文件里面，用render: h => h(App)把它们挂载到#app里面，有的却写的是components:{app}?
正好加了一个vue的群，在群里提出了我的问题，里面的人告诉我说：
1.应该index.html 里面那个ID 只在node环境用 打包以后 就渲染成挂载的app.vue的页面了.
2.app.vue 跟 index.html 里面的ID 不一定一样 ，app.vue里面的id 会最终渲染到DOM结构里，并且写的其他标签 要放到那个div里面 而且template下级 只能有一个div.
3.
new Vue({
router,
store,
//components: { App } <!---------------------------------------------vue1.0的写法
render: h => h(App) <!---------------------------------------------vue2.0的写法
}).$mount('#app')
先说render：render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来。
然后是 => 箭头函数。是Es6中的新语法：（如果大家想更深入的了解，推荐一篇文章：链接：https://segmentfault.com/a/1190000009410939）
其实render: h => h(App)的意思， 首先 ：表示 Vue 实例选项对象的 render 方法，它作为一个函数，接受传入的参数 h 函数，返回 h(App) 的函数调用结果。等价于：
{
render: function(h) {
return h(App);
}
}其次：Vue 在创建 Vue 实例时，通过调用 render 方法来渲染实例的 DOM 树。