vue-cli构建vue程序后项目是怎么运行的(index.html,main.js,app.vue之间的关系)

如图,这个是使用vue-cli构建项目后删除一些没用的东西,简洁的目录结构

1.index.html

这个是index.html文件,可以看到,body里面有一个id="app"的div

2.main.js

这里new Vue()是创建了一个新的vue实例,
new Vue().$mount("#app") 这里是在vue实例上挂载元素, 这个元素就是index.html中id="app"的div元素
上面引入了App组件 所以在实例里render了App

3.App.vue

标签将会把路由相关内容渲染在这个地方