最近使用Vue提供的官方CLI和构建工具webpack生成VUE项目，对于其中的main.js，App.vue，index.html这三文件之前的关系有点疑惑，一番探究后，记录如下。希望对刚学习Vue的小伙伴有所帮助。

一，首先App.vue比较简单，就是一个单文件组件，组件名‘App’。（单文件组件，不明白小伙伴可以看看vue的官方文档）

二，接下来就是main.js，这里贴关键代码分析 

import Vue from 'vue'
import App from './App'

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

1. import App from './App'   将组件App被引入了main.js中。
2. el:'#app'  将vue实例挂载到#app （即id=‘app’的dom元素，index.html中定义的app）
3. components: { App }   局部注册 App组件
4. template: '<App/>'   使用字符串模板'<App/>'代替el中挂载的元素,这样<App/>组件就替换掉了index.html中id='app'的元素。

三，index.html中是怎么引入main.js文件的呢（这是我之前最疑惑的地方）

  查了资料才知道，是构建工具webpack的功劳。

  当我们bulid的时候构建工具将所有的 js，组件打包成一个独立的js文件，引入到index.html中。在npm run dev 的时候，可以通过浏览器开发人员工具调式代码看出来。

四，最后总结