Vue项目启动代码执行流程分析...

相信来看看这篇文章的童鞋，都对Vue已经有了大致的了解。所以，话不多说，直接进入正题。

首先看下图：

一般一个初步的Vue项目创建好之后都会有这三个文件：index.html 、main.js 、App.js;

1、index.html :众做周知，Vue是单页面形式开发，而这个index.html文件在其中起着特别重要的作用。所有组件（后缀名为.vue都被视为组件）都会通过此文件进行渲染加载。

这个文件，你可以不用管。一般情况下，很少会在这里面进行大量的代码二次编写。

2、main.js : 这个文件，在我看来，它相当于一个C/Java中的入口函数。控制着初次启动Vue项目要加载的组件。

下面是main.js的代码截图，我会对每行代码进行逐一分析

  （1）import  A   from  'B’
   这类语句相当于引入B（这一般是路径）然后给它起个名字叫做A；

（2）Vue.user(C)
这个意思是 全局方法定义 C。也就是说，定义以后，你可以在这个Vue项目的任意地方使用该组件（当然，你不能乱写）。

（3）

这个和index.html中的相挂钩。

官网解释为：模板将会替换挂载的元素。挂载元素的内容都将被忽略

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>，然后index.html文件被初步解析为这种形式

<div id="myapp">
    <app></app>
</div>

（4）watch ： 用来监听路由的变化，可以用来定义页面切换时过渡效果。

3、App.vue：组件。额，暂且，你可以把它认为是一个根组件。

export中的name属性，相当于给这个组件定义一个名字。便于识别和使用。

created: 这是一个生命周期函数，因为App这个组件中并没有任何信息。他只是作为根组件来使用。所以，我们要在进入这个组件的时候跳转到一个初始化界面--login。

（个人感觉App没啥用，index.html和main.js完全可以实现这些功能）。

   下面，我们来总结一下，vue项目的启动，在表层可视为main.js-->App.vue（组件）-->index.html

最后，顺便提下src/router/index.js这个文件。

对于里面一些代码我来简单介绍一下。

1、引入组件的代码。

引入的时候注意好格式、路径就行。

2、routes定义时。

path为你以后页面间路由跳转的路径；

name亦可以作为条状的依据

component:这个是组件名，要和你引入组件时定义的名字保持一致。

当然，还有其他属性，这个要看你项目需求了。

这个是官网的Vue-Router介绍 https://router./zh/guide/

 

转载  https://blog.csdn.net/cxf8881/article/details/80620545