本人也是才学习Vue不久,当看到脚手架搭建出来的Vue项目不知道是怎样的一个执行过程。知道main.js是入口文件,但是不明白里面的内容是为何。下面直接上代码讲解。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import ElementUI from 'element-ui';

Vue.config.productionTip = false;

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

new Vue是用来构建根实例,一个项目中我们推荐只有一个根实例。

m o u n t 是 一 种 什 么 东 西 呢 , 经 过 查 阅 官 方 文 档 得 知 当 没 有 声 明 e l 的 时 候 可 以 使 用 mount是一种什么东西呢,经过查阅官方文档得知当没有声明 el的时候可以使用 mount西el使mount实现外挂载。

为何不用el要用 m o u n t 这 种 方 式 呢 , 经 过 查 阅 官 方 文 档 得 知 , e l t e m p l a t e r e n d e r t 这 三 种 都 是 可 以 加 载 模 板 , 但 是 有 r e n d e r 的 时 候 就 会 替 代 e l 或 者 t e m p l a t e 。 而 其 我 们 存 在 r e n d e r 。 所 以 只 能 用 mount这种方式呢,经过查阅官方文档得知,el template rendert这三种都是可以加载模板,但是有render的时候就会替代el 或者template。而其我们存在render。所以只能用 mounteltemplaterendertrendereltemplaterendermount这种方式声明挂载的位置。

render是一种加载模板的方式,

App指的是App.vue文件。

#app是指在public文件夹下的index.html文件一个元素的ID。到时候回把App.vue当作模板挂载到这个Id为app的下面。

Logo

前往低代码交流专区

更多推荐