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

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. RxJava--Buffer,GroupBy 对比

    Buffer 设定收集n个元素为一组,以下方代码为例,三个为一组,则当组满三个元素时,返回一次List数据 没组满三个元素时,如果调用onComplete,直接发送剩余元素,没调用onComplete ...

  2. Git初始化本地代码及提交到服务器

    2019独角兽企业重金招聘Python工程师标准>>> 1.先安装Git客户端 2.进入需要提交的文件夹目录 3.打开Git Bash,点击右键中的Git Bash 打开git命令窗 ...

  3. postman（参数化）

    一.参数化 1.新建csv文件 2.csv文件中输入变量名和参数 3.postman中新增接口,并设置变量 4.选择进入runner页面 方法一 方法二 5.导入参数化csv格式文件,点击run It ...

  4. speedtest 测试服务器上传下载速度

    下载speedtest.py wget https://raw.githubusercontent.com/sivel/speedtest-cli/master/speedtest.py 赋予执行权限 ...

  5. 学习笔记之MySQL的使用

    什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 每个数据库都有一个或多个不同的 API 用于创建,访问,管理,搜索和复制所保存的数据. 我们也可以将数据存储在文 ...

  6. Java——单双引号的区别

    单引号: 单引号包括的是单个字符,表示的是char类型.例如: char  a='1' 双引号: 双引号可以包括0个或者多个字符,表示的是String类型. 例如: String s="ab ...

  7. Node 内存泄漏排查案例

    背景 在阿里云上看到我运行了一段时间的程序,发现 memory 一项基本是在稳步提升,就知道有内存泄漏的情况出现.如下图 近三日从 35% 升到 40%,缓慢而坚定的提升. 代码 排查此问题需要分析其 ...

  8. rsync客户端一键安装rsync脚本(源码)

    客户端 read -np "请输入源码rsync的URL 地址 包名(以空格为分隔符,别带/):" URL DZ BM yum remove -y rsync &>& ...

  9. Python Web实战：Python+Django+MySQL实现基于Web版的增删改查

    前言 本篇使用Python Web框架Django连接和操作MySQL数据库学生信息管理系统(SMS),主要包含对学生信息增删改查功能,旨在快速入门Python Web,少走弯路.效果演示在项目实战最 ...

  10. 【Spark】通过Spark实现点击流日志分析

    文章目录 数据大致内容及格式 统计PV(PageViews) 统计UV(Unique Visitor) 求取TopN 数据大致内容及格式 194.237.142.21 - - [18/Sep/2013 ...