Vue中main.js为什么要用render注册App组件

为什么要用render(呈现，翻译）

//当你创建了Vue的脚手架，main.js文件中创建Vue实例对象就会出现以下一段代码
new Vue({
    el: '#app',
    render: h => h(App)
})

为什么这里要用render去注册App组件呢?

//常见的组件注册方式
new Vue({
    el: '#app',
     components: {
      	App
    },
})

当你用这段代码在脚手架环境下的main.js注册App组件的时候就会出现以下报错

这个报错的大概意思就是缺少一个解析模板的模板编译器

为什么不在脚手架环境下main.js用components注册组件就不会报错呢？
这是因为我们自己引入的Vue文件包含两大模块（Vue的核心功能（生命周期，处理事件…）+模板解析器）
然而脚手架给我们的引入的vue只包含了Vue的核心功能而没用模板解析器
此处通过Ctrl键+点击引入Vue的语句中的Vue地址找到Vue的配置文件夹然后打开package.json文件查看第6行代码此行代码就是你引入Vue文件的名字

这个文件就是精简版的Vue（缺少模板解析器）

为什么main.js不直接引入完整版的Vue？
1.省下内存空间（这个理由有点牵强但确实是这个样子）
2.我们项目完成后这个模板解析器就没有用了！所以模板解析器不需要一起进行打包。
为什么xxx.vue文件里面的template又可以解析呢？
Vue专门给我们引入了一个解析xxx.vue文件template插件

项目文件最外层的package.json文件中第23行就是Vue给我们引入解析xxx.vue文件的插件

解决main.js引入精简版的vue无法解析模板的方法：
使用render函数

render函数的介绍:

render(function){
	return function('html标签名'，'标签内容'，'function')
}

//因为没有用到this所以可以用箭头函数精简render函数
render：(function)=>{return function('html标签名'，'标签内容'，'function')}
//注意冒号后的是render这个函数，这里的render是Vue实例对象的一个属性名
//又因为只有一个参数function与返回语句所以可以简写为以下形式
render：function=>function('html标签名'，'标签内容'，'function')
//最后App是一个变量因此function的参数可以直接写App
render：function=>function(App)

//这里的function可以改成h或任意名称
render：h=>h(App)