vue-cli4.x构建的项目的执行顺序详解

        通过vue-cli构建了一个项目，那么让我们来了解一下整个项目是如何执行的。

        安装vue-cli的过程我就省略了，从启动服务开始吧！通过指令$npm start serve启动了服务，在浏览器输入http://localhost:8080/，我们可以看到vue已经跑起来了，运行界面如下：

        那么，是怎么来到这个界面的呢？下面我来讲解一下。

      （1）先看一下项目的目录结构，如下图：

（2）当我们在浏览器输入http://localhost:8080/，浏览器首先找到入口文件main.js，

我们可以看到main.js下面创建了一个实例，

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

        （3）该实例挂载在一个id为app的dom节点上，这时便找到/public/index.html，因为这里只有这个文件夹下有html文件，并且里面有个id为app的dom节点，如下图：

        （4）此时的<div id="app"></div>被App.vue里面的template模板替换，即如下：

        （5）当解析到第五行的时候，页面中的两个超链接Home和About已经被渲染出来了，接下来往下走，到了<router-view/>，这时便走到了/router/index.js，看一下这个文件里面的内容：

可以看到，index.js文件引用了两个组件，分别为Home和About，<router-view/>就是把router里面引用的组件都渲染到页面上。

      （6）先看一下Home.vue组件（因为默认显示这个页面，点击About才跳转到对应的页面上显示），如下图：

      （7）因为调用了HelloWorld组件，所以要去找到组件，并把组件内容渲染到页面上，组件内容如下图：

直到这里，我们看到的页面数据已经渲染完成了，还剩下About页面，点击后渲染

        （8）当我们点击About的时候，便跳转到该页面，效果如下：

About.vue的内容如下，渲染效果如期一样：

        （9）至此，新构建的项目就已经全部执行完毕，这就是整个项目初始化时的流程。