###发现不少小伙伴才刚开始接触到这个结构都被绕的迷糊，而发现很多人说的也不是那么准确，那么下面我来说一下是怎么回事###

1.首先我们来看看原生Vue中组件的写法， 我们按照vue-cli的结构按照原生的写法去写一下

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>

</head>

<body>

	 <!-- index.html -->

	 <div id="app"></div>

	<script type="text/javascript">

		//App.vue

		var 这是一个子组件 = {

					template:`<div id="aaa" @click="handclick()">哈哈哈哈哈</div>`,

					methods:{

						handclick:function(){

							alert("1111");

						}

					},

					data:function(){

						return {}

					}

				}

		//main.js (官方API说了：如果有Vue根实例里有template这个属性 会将el挂载的元素替换)

		new Vue({

			el:"#app",

			components:{"child":这是一个子组件},

			template:"<child></child>",

		})

	</script>

</body>

</html>

2.我们打开vue-cli里面的main.js，这个文件被称为入口文件，这个里面有一个vue的实例，el:"#app"，这个挂载的元素实际上是我们的index.html的 <div id="app"></div>，看下面的图，这实际是ES6的写法

import Vue from 'vue'

import App from './App'

import router from './router'

Vue.config.productionTip = false

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

3.我们在转成ES5的写法，import(导入)这是一个子组件 就是 App.vue

import Vue from 'vue'

import 这是一个子组件 from './App'

import router from './router'

Vue.config.productionTip = false

new Vue({

  el: '#app',

  router:router,

  components: {	"child":这是一个子组件 },

  template: '<child></child>'

})

4.以上原生Vue 和 vue-cli的写法都是一样的，把子组件放到了根实例的template属性里面，实际上App.vue是根实例下的一个子组件，但是我们把这个子组件当作根组件来使用而已（说到底App.vue就是根实例下的一个子组件），那怎么来证明呢，我们来验证一下App.vue实际上是不是子组件，我们给根组件一个模板，并在里面在放App.vue这个子组件，并且往子组件传一个参数



import Vue from 'vue'

import 这是一个子组件 from './App'

import router from './router'

Vue.config.productionTip = false

new Vue({

  el: '#app',

  router:router,

  components: { "child":这是一个子组件 },

  template: `<div @click="testClick()" style="background:pink;">

				我是根组件

				<child :message="sendData" style="background:orange;"></child>

  			 </div>`,

  data:{

  	text:"我是根组件",

  	sendData:"嘻嘻嘻嘻"

  },

  methods:{

  	testClick:function(){

  		alert("我是根组件")

  	}

  }

})

```

{{info}}

#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}

上面已经证明了，App.vue是根实例下的一个子组件。

因为main.js是入口文件不适合写逻辑，所以下面分支出一个子组件（App.vue），我们使用的时候就把这个子组件（App.vue）当做我们的顶级组件!

<br>

<br>

![](https://img2018.cnblogs.com/blog/1603628/201903/1603628-20190323215857599-69630583.png)

看上面这个vue-devTools，Root 是我们的根实例，他在main.js这个入口文件里面。

Root >> App >> HelloWorld

vue-cli中的index.html ，main.js , App.vue的关系的更多相关文章

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

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

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

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

  3. vue cli 中关于vue.config.js中chainWebpack的配置

    Vue CLI  的官方文档上写:调整webpack配置最简单的方式就是在vue.config.js中的configureWebpack选项提供一个对象. Vue CLI 内部的 webpack 配置 ...

  4. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  5. Vue-axios 在vue cli中封装

    common/post.js import axios from 'axios' // 引入axios import qs from 'qs' // 引入qs axios.defaults.baseU ...

  6. vue cli中的env详解

    前言 相信使用过 vueCli 开发项目的小伙伴有点郁闷,正常开发时会有三个接口环境(开发,测试,正式),但是 vueCli 只提供了两种 development,production(不包含 tes ...

  7. VUE CLI 3.0 项目引入 Mock.js

    mockjs 官网:http://mockjs.com/ 之前没有使用过 mockjs 的同学,请参考官网文档,数据生成规则和方法的调用都有详细说明. 一.通过npm安装依赖包 1. 进入到项目目录, ...

  8. vue项目 安装和配置sass & main.js引入scss文件报错

    通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...

  9. 热力图 vue 项目中使用热力图插件 “heatmap.js”（保姆式教程）

    我现在写的这项目是用CDN引入 heatmap.js, 可根据自己项目情况使用哪种方式引入插件. 官网地址 "https://www.patrick-wied.at/static/heatm ...

随机推荐

  1. 酷狗音乐快速转换MP3格式的方法

    喜欢听音乐的朋友们,散步跑步的时候都是随身听,音乐可以给人带来力量,让人心情愉悦,有时候甚至还可以让我们忘记烦恼和忧愁,是一种不错的解压方式,所以热爱运动的宝宝们是离不来音乐的陪伴的,这样说来随身听的 ...

  2. 《LabVIEW 虚拟仪器程序设计从入门到精通（第二版）》一1.3　小结

    本节书摘来自异步社区<LabVIEW 虚拟仪器程序设计从入门到精通(第二版)>一书中的第1章,第1.3节,作者 林静 , 林振宇 , 郑福仁,更多章节内容可以访问云栖社区"异步社 ...

  3. 11.25-11.27 配置防盗链，访问控制（Directory,FilesMatch）

    4月17日任务 11.25 配置防盗链 11.26 访问控制Directory 11.27 访问控制FilesMatch 扩展 几种限制ip的方法 http://ask.apelearn.com/qu ...

  4. 2019 Multi-University Training Contest 10 I Block Breaker

    Problem Description Given a rectangle frame of size n×m. Initially, the frame is strewn with n×m squ ...

  5. 图论--LCA--在线RMQ ST

    板子测试POJ1330,一发入魂,作者是KuangBin神犇,感谢?‍ #include <cstdio> #include <cstring> #include <al ...

  6. SQL 文件导入数据库

    1.首先通过 xshell 连接数据库服务器,执行命令 mysql -u root -p 命令,按照提示输入密码,连接上数据库 2.在连接终端上执行命令 create database JD_Mode ...

  7. 题目分享M

    题意: 其实就是找到AB+min(AC,BC)的最大值 分析:刚看到这道题,很容易往AB为树的直径方向上去想,C就可以遍历每个点,最后求出对于每个点为C时的最大值 那AB到底是不是树的直径或者为什么A ...

  8. Android | 带你零代码实现安卓扫码功能

    目录 小序 背景介绍 前期准备 开始搬运 结语 小序   这是一篇纯新手教学,本人之前没有任何安卓开发经验(尴尬),本文也不涉及任何代码就可以使用一个扫码demo,华为scankit真是新手的福音-- ...

  9. Android P HIDL demo代码编写 （原创）

    之前的文章已经分析了HIDL服务的注册和调用,这篇文章来总结下一个HIDL的服务如何编写. 缩写HAL文件 首先要确认放置文件夹和接口的包名,因为这跟后面使用脚本生成一部分代码有关,一般默认的放在ha ...

  10. 手把手教你进行Scrapy中item类的实例化操作

    接下来我们将在爬虫主体文件中对Item的值进行填充. 1.首先在爬虫主体文件中将Item模块导入进来,如下图所示. 2.第一步的意思是说将items.py中的ArticleItem类导入到爬虫主体文件 ...