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

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. Mybatis自动生成插件对数据库类型为text的处理

    2019独角兽企业重金招聘Python工程师标准>>> 如果数据库中的字段为text或者blob这种大文本类型,在使用MybatisGenerator工具自动生成代码的时候会将其进行 ...

  2. solr7.4创建core，导入MySQL数据，中文分词

    #solr版本:7.4.0 一.新建Core 进入安装目录下得server/solr/,创建一个文件夹,如:new_core 拷贝server/solr/configsets/_default/con ...

  3. 码云git本地仓库链接远程仓库

    原文链接: 点我 git提交时,仓库是空的,本地有源码   应该打开cmd   归到项目路径 然后输入git push -u origin master -f 是把本地的项目强制推送到空的仓库 git ...

  4. 学数据库你竟然不用用JAVA写代码，可惜你遇到了我！ JAVA连接数据库（JDBC）的安装使用教程

    Step 1 你得有Eclipse 没有出门右拐,我教不了你. Step 2 你得有Mysql MySQL的详细安装过程,我在另一篇博客中给出.戳我 Step 3 安装JDBC 可以去官网下,如果用的 ...

  5. hdu2544最短路

    在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的t-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店到赛场的路线,你可以帮助 ...

  6. POJ - 2387 Til the Cows Come Home （最短路入门）

    Bessie is out in the field and wants to get back to the barn to get as much sleep as possible before ...

  7. 数据源管理 | 基于DataX组件，同步数据和源码分析

    本文源码:GitHub·点这里 || GitEE·点这里 一.DataX工具简介 1.设计理念 DataX是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL.Oracle等).HDF ...

  8. 【Spark】一张图看懂Spark的运行架构，以standAlone模式为例

  9. 【matlab 基础篇 01】快速开始第一个程序（详细图文+文末资源）

    快速入门matlab,系统地整理一遍,如何你和我一样是一个新手,那么此文很适合你: 文章目录 1 软件安装 2 打开软件 3 编写程序 3.1 基础步骤 3.2 添加PATH 3.3 命令行模式 4 ...

  10. equals方法和 == 的使用

    equals方法的使用 equals方法 源码展示: public boolean equals(Object obj) { return (this == obj); } 解析: equals方法默 ...