Vue学习第11天——分析Vue脚手架中的main.js文件

按照非脚手架中的写法，main.js中代码应该为如下代码

import Vue from "Vue";
import App from "./App.vue";

new Vue({
	el:"#app",
	template:"<App></App>"
	components:{App},
})

但实际main.js文件中的代码

//引入的为残缺版的vue（引入的为node_modules/vue/dist/vue.runtime.esm.js）
import Vue from 'vue'
import App from './App.vue'
//关闭生产环境提示
Vue.config.productionTip = false

new Vue({
	//这行代码完成的功能：将App组件放入到容器中
  render:h => h(App),
}).$mount('#app')

分析代码

1、import Vue from 'vue'

引入的Vue文件实际为不完整版的vue文件，实际引入的为node_modules/vue/dist/vue.runtime.esm.js

① vue.js和vue.runtime.xxx.js的区别
vue.js文件是完整版的Vue，包括核心功能（生命周期函数等）和模板解析器，vue.runtime.xxx.js文件是运行版的Vue，只包含核心功能，没有模板解析器

② 为什么不引入vue.js
vue.js包含模板编译器，但是当我们打包项目时，webpack也会帮我们解析.vue文件为.js文件，因此不需要使用vue.js的模板编译器

2、.$mount("#app") 与el:"#app"的区别

两者没有区别

3、render函数

render : h => h(App)这行函数实现的功能为将App组件放入到容器中

render函数的非简写形式

render:(createElement)=>{
	//相当于在放入一个h1标签，内容为世界你好
	retutrn createElemen("h1","世界你好")
}
//简写
render:h => h(App)