在初始化的Vue项目中,我们最先接触到的就是main.js,App.vue,index.html这三个文件,我们从培训视频或者官方文档上可以了解到:

index.html---主页,项目入口

App.vue---根组件

main.js---入口文件

那么这几个文件之间的联系如何呢?

1.先看index.html中的内容:(为了很好的标识各个文件,我对各文件进行了文字标记)

2.在App.vue中,我做了如下处理:

3.在main.js中,文件初始内容如图:

那么我们打卡的网页如何呢?

网页效果如下:

也就是说,在网页的Title部分,加载了index.html中定义的Title,而在正文部分,加载了App.vue中定义的部分。(但是需要注意的是,在浏览器打开的瞬间,浏览器中正文部分会瞬间显示index.html中定义的正文部分

那么,我们就可以来分析上述的逻辑了,浏览器访问项目,最先访问的是index.html文件,

而index.html中

<div id="app">来自index.html正文中的内容</div>

上面有一个id为app的挂载点,之后我们的Vue根实例就会挂载到该挂载点上

main.js作为项目的入口文件,在main.js中,新建了一个Vue实例,在Vue实例中,通过

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

告诉该实例要挂载的地方;(即实例装载到index.html中的位置)

接着,实例中注册了一个局部组件App,这个局部组件App来自于哪儿呢?

import App from './App.vue'

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

这个局部组件是当前目录下的App.vue;

而起模板是什么呢?模板就是组件App.vue中的template中的内容。(template会替代原来的的挂载点处的内容)

所以Vue这个实例就是战士的是App.vue这个组件的内容

所以,我们进行总结:在项目运行中,main.js作为项目的入口文件,运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件中的模板中的内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

而index.html中的Title部分不会被取代,所以会一直保留。

关于Vue中main.js,App.vue,index.html之间关系进行总结的更多相关文章

  1. vue项目中,main.js,App.vue,index.html如何调用

    1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...

  2. vue-cli中的index.html ,main.js , App.vue的关系

    ###发现不少小伙伴才刚开始接触到这个结构都被绕的迷糊,而发现很多人说的也不是那么准确,那么下面我来说一下是怎么回事### 1.首先我们来看看原生Vue中组件的写法, 我们按照vue-cli的结构按照 ...

  3. 【vue】index.html main.js app.vue index.js怎么结合的? 怎么打包的?搜集的信息

    转载:https://blog.csdn.net/yudiandemingzi/article/details/80247137 怎么结合的: 一.启动项目 第一步:cmd进入项目文件里,运行npm ...

  4. vue中main.js配置后端请求地址

    Vue.config.productionTip = false; axios.defaults.baseURL = 'http://127.0.0.1:8003/';//后端开发环境地址 // ax ...

  5. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  6. vue项目根目录下index.html中的id="app",与src目录下的App.vue中的id="app"为什么不会冲突

    感谢:https://blog.csdn.net/qq_35624642/article/details/78243413 index.html <body> <div id=&qu ...

  7. vue中的js引入图片,必须require进来

    需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png& ...

  8. vue中的js引入图片,使用require相关问题

    vue中的js引入图片,必须require进来 或者引用网络地址 <template> <div class="home"> <img alt=&qu ...

  9. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

随机推荐

  1. HDU 2036 改革春风吹满地 (计算几何)

    题意:你懂得. 析:没什么可说的,求面积用叉乘,尽量不要用海伦公式,因为计算量大,而且精度损失. 代码如下: #include <iostream> #include <cstdio ...

  2. 声音处理(Cool Edit)

    平直化处理 上升半音

  3. (最短路 SPFA)Invitation Cards -- poj -- 1511

    链接: http://poj.org/problem?id=1511 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82829#probl ...

  4. 原型模式及C++实现

    以下是我自己学习设计模式的感想. 原型模式 学过C++的都知道拷贝构造函数,复制一个对象分为浅拷贝和深拷贝. 浅拷贝:就是给对象中的每个成员变量进行复制,就是把A1类中的变量直接赋给A2类中变量,属于 ...

  5. ZOJ3714:Java Beans

    There are N little kids sitting in a circle, each of them are carrying some java beans in their hand ...

  6. 深夜配置一把struts2

    在intellij idea里面配置出来了struts2的一个Helloworld,因为换了工具,在网上查了很多关于IDEA配置它的方式,好多是用Maven解决依赖关系的.于是按照网上的来,发现很多东 ...

  7. CentOS将普通用户加入管理员组

    将用户username加入wheel组: usermod -aG wheel username 将普通用户username加入root组: usermod -aG sudo username 永久生效 ...

  8. JaveScript初学-基础语法

    一.JavaScript数据类型 JavaScript中,一切皆对象. JavaScript拥有动态类型,使用var关键字(也可以不必)进行声明——字符串.数字.布尔.对象.Null.Undefine ...

  9. jquery带参数选项卡4

    带参数选项卡: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  10. FastDFS 安装与使用

    FastDFS 安装与使用 1. 什么是 FastDFS FastDFS是一个开源的高性能分布式文件系统(DFS). 它的主要功能包括:文件存储,文件同步和文件访问,以及高容量和负载平衡的设计. Fa ...