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文件被初步解析为这种形式

（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.vuejs.org/zh/guide/

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

Vue项目启动代码执行流程分析相关推荐

「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
Android系统手机开机画面各个阶段代码执行流程分析（Part1）
提到Android系统的UI,我们最先接触到的便是系统在启动过程中所出现的画面了.Android系统在启动的过程中,最多可以出现三个画面,每一个画面都用来描述一个不同的启动阶段.本文将详细分析这三个开 ...
Android系统手机开机画面各个阶段代码执行流程分析（Part2）
3. 第三个开机画面的显示过程第三个开机画面是由应用程序bootanimation来负责显示的.应用程序bootanimation在启动脚本init.rc中被配置成了一个服务,如下所示: servi ...
Springboot 项目启动后执行某些自定义代码
Springboot 项目启动后执行某些自定义代码 Springboot给我们提供了两种"开机启动"某些方法的方式:ApplicationRunner和CommandLineRun ...
【网络安全】Metasploit生成的Shellcode的导入函数解析以及执行流程分析(2)
密码破解的利器--彩虹表(rainbow table) 确定 shellcode 依赖于哪些导入将使研究人员进一步了解其其余逻辑.不用动态分析shellcode,并且考虑到研究人员已经弄清楚了上面的哈 ...
动态执行流程分析和性能瓶颈分析的利器——gperftools的Cpu Profiler
在<动态执行流程分析和性能瓶颈分析的利器--valgrind的callgrind>中,我们领略了valgrind对流程和性能瓶颈分析的强大能力.本文将介绍拥有相似能力的gperftools ...
动态执行流程分析和性能瓶颈分析的利器——valgrind的callgrind
在<内存.性能问题分析的利器--valgrind>一文中我们简单介绍了下valgrind工具集,本文将使用callgrind工具进行动态执行流程分析和性能瓶颈分析.(转载请指明出于brea ...
Java多线程- 线程池的基本使用和执行流程分析 - ThreadPoolExecutor
线程池的实现原理池化技术一说到线程池自然就会想到池化技术. 其实所谓池化技术,就是把一些能够复用的东西放到池中,避免重复创建.销毁的开销,从而极大提高性能. 常见池化技术的例如: 线程池内存池 ...
Mybatis执行流程分析_自定义简易Mybatis框架
自定义简易Mybatis框架 Mybatis执行流程分析 Mybatis代码编写流程: Mybatis配置文件加载过程: 需求分析及技术概述根据上述的功能结构图, 得出如下需求: 1. 需要具有配置 ...

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

Vue项目启动代码执行流程分析相关推荐

最新文章

热门文章