vue的main.js讲解一

vue的main.js整体布局

开发模式与生产模式

没输入等于开发模式
开发模式等于【Vue.config.productionTip = true】
生产模式【Vue.config.productionTip = false】

下方的new Vue

new Vue({render: h => h(App),}).$mount('#app')

变量是(App)【注意这里是大写的】
生成一个元素挂载到#app里面：

render: h => h(App)

详细解释：
这个表达式最终会生成一个ES5版本的函数
ES5版本中

render:function(createElement){return(createElement(APP)}

ES6中的是 这里少function

render(createElement){return createElement(App)}

ES6中的简写元素 createElement写成h

render(h){return h(App)}

ES6中的再简写===写成箭头函数

render: h => h(App);

其中
函数里面的参数(createElement)是创建一个元素的意思

$mount 手动挂载的意思
#app指向index.html的

放上代码

import Vue from 'vue'; // 默认去node_modules文件目录去找到这个vue
import App from './App.vue'; // 这个就是src目录下的App.vue


Vue.config.productionTip = true


new Vue({ render: h => h(App), }).$mount('#app')
// 变量是(App)大写的
// 生成一个元素挂载到#app里面：

// 详细解释：
// 这个最终会生成一个ES5版本的函数
// render:function(createElement){}
//   return createElement(APP)
// ES6中的是
// render(createElement){return createElement(App)}
// 简写
// render(h){return h(App)}
// 再简写
// render: h => h(App);
// 其中
// 函数里面的参数(createElement)是创建一个元素的意思

// $mount 手动挂载的意思    
//  #app指向index.html的    <div id="app"></div>
//  意思是：
//  创建的这个元素挂载到#app这里