vue项目是怎么运行起来的

涉及到的项目文件

最近因为公司项目问题，开始学习vue。万事开头难，开始写博客，纪录一下小白的成长，也方便以后看

1. index.html >主页，项目入口
2. main.js >main.js是我们的入口文件，主要作用是初始化vue实例，并引入所需要的插件
3. App.vue > 根组件 所有页面都是在App.vue下进行切换的
4. router/index.js >路由文件

index.html，main.js，App.vue 三者关系

在网页的Title部分，加载了index.html中定义的Title，而在正文部分，加载了App.vue中定义的部分

<div id="app">来自index.html正文中的内容</div>

上面有一个id为app的挂载点，之后我们的Vue根实例就会挂载到该挂载点上；

new Vue({
  el: '#app',//告诉该实例要挂载的地方；（即实例装载到index.html中的位置）
  router,
  components: { App },//注册了一个局部组件App
  template: '<App/>'//模板就是组件App.vue中的template中的内容。（template会替代原来的的挂载点处的内容）
})

总结

在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

node_modules为依赖的模块

config中配置了路径端口值等

build中配置了webpack的基本配置、开发环境配置、生产环境配置等