Vue工程中 main.js 的作用、npm run serve的执行流程

发布时间 2023-10-08 19:26:37作者: 嘎嘎鸭2

1.内容:

import Vue from 'vue'      //导入 Vue 核心包
import App from './App.vue'    //导入 App.vue 根组件

Vue.config.productionTip = false   //提示当前处于什么环境(生产环境 / 开发环境),fasle是什么提示都没有,改为true才提示,但通常写false

new Vue({                      // Vue 实例化,提供 render 方法
  render: h => h(App),   // render 方法的作用是 基于App.vue创建结构,渲染 index.html 里的 id = "app" 的容器
}).$mount('#app')          // .$mount('#app') 的作用与 el : ' #app '  完全一致,都用于指定 Vue 所管理的容器

-----------------------------------------------------------------------------------------------------------------------------------------------------------

2. render: h => h(App) 的完整格式:

render: (createElement) => {

      return  createElement (App)   //基于App创建元素结构

}

 

3. main.js文件的核心作用:导入App.vue,基于App.vue创建结构,渲染 index.html 里的 id = "app" 的容器

 

4.总结:在运行命令 npm run serve 的时候,在 localhost:8080 中之所以能看到最终界面,本质上是先执行 main.js ,在 main.js 中我们写了三段核心代码:导入了 Vue ,导入了 App.vue 根组件,进行了 Vue 的实例化,在实例化过程中利用 render 方法将 App.vue 动态创建结构,最终渲染到了 index.html 的容器当中,咱们是通过 .$mount('#app') 来指定的容器,用 el : ' #app ' 也完全可以。和以前的区别就在于,以前我们的模板是直接放在 html 里面的,这一次因为是放在 App.vue 里面了,所以如果要创建结构渲染,得提供一个 render 方法,基于 render 方法来创建结构做渲染。