在Vue项目中main.js文件作为程序入口是必不可少的，js中的简写形式，以及ES6的新特性，可以使得代码更简洁，但是对于初学者可能可读性较差，下面是我的理解。

首先是Vue2中，main.js的核心代码为

import Vue from 'vue'
import App from './App.Vue'
Vue.config.productionTip=false

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

主要是new出来的vue中el配置项是Vue的构造函数的配置项，表示Vue服务于哪个容器，表示将组件挂载到id为app的div中，这个div在index.html中，其次就是render函数，为什么会有render函数的出现？，是因为引入的Vue是体积更小的版本，有些功能失效了，无法解析template标签，以前渲染页面需要用到完整版的Vue+template:`<App><APP>`,但是这里使用render函数+小体积版Vue。render函数是Vue自动调用的，会传递一个参数，render函数原始格式为

render:function (param){
    return param('h1','helloWorld')//这种方式渲染等于template:`<h1>helloWorld<h1>`
}

param为接受的参数，类型是函数。

简写形式，先写简写形式去掉function,再改成箭头函数

render:(param)=>{
    return param('h1','helloWorld')
}
//参数只有一个去掉括号,参数名(是个函数)叫h
render:h=>h('h1','helloWorld')
/*这里是渲染h1内置标签所以要写第二个参数，标签体内容，但是渲染的App组件，内容在App组件里面，所以不需要第二个参数*/
render:h=>h('App');

所以在Vue2中的main.js最终形式就是这么来的

在Vue3中初始化的main.js是这样的

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

这里使用import { createApp } from ‘vue’带有{}表示分别暴露，vue中不止export了一个函数，默认暴露就不用加{}

createApp(App)表示创建应用实例对象app相当于Vue中ViewModel，管理App.vue这个最大的组件，AppViewComponent管理着其他组件，但是app比VM体积更小。.$mount表示挂载到名为app的容器中去，Vue2中也可以这样使用。其实Vue3 中的main.js很好理解。