Vue框架项目实战整理：3、Vue项目执行流程分析（一）

目录

一、前言

二、回顾项目启动

三、执行流程分析

1、打开项目

2、执行流程分析

一、前言

上两篇讲了Vue框架项目实战整理：1、开发工具介绍、快速启动Vue和Vue框架项目实战整理：2、Vue环境搭建，今天应该到Vue项目执行流程分析的时候了，为什么会有这方便的研究呢？因为接触开发也将近7年了，根据编程经验当时的想法是整个项目的执行流程都清晰了，到时候如果有机会自己搭建Vue项目架构就会得心应手、独挡一面了，毕竟语言是相通的......好了，绕的有点远开始干货。。。

二、回顾项目启动

指定项目目录

cd 项目路径 ，

如：cd/Users//////

启动项目

npm run dev

文件下面的目录：

命令行界面：

显示效果界面：

三、执行流程分析 1、打开项目

首先把项目用工具 Text 或 Code、idea 打开展示

2、执行流程分析

项目创建成功，启动后会在浏览器中打开，接下来我们来分析下它的执行流程

（1）进入页面首先加载index.html

（2）main.js文件中给id="app"的div创建一个Vue的实例

（3）这个Vue的实例，Vue在调用方法时，会传入一个函数作为参数，

也就是这里的h的实参是函数，然后会以App为参数进行调用。

然后跳转到App.vue

（3）跳转到App.vue进行加载，然后显示页面