Vue项目源码分析系列一

Vue相关的基础知识我们已经介绍了不少，官网也有很详细的使用说明，那么从本篇文章开始，我会陆续为大家介绍一款开源的Vue项目。首先感谢唐岗在github上分享的“基于vue.js重写Cnodejs.org社区的webapp”，源码地址如下：https://github.com/shinygang/Vue-cnodejs。接下来我会不定期阅读该项目，把其中的一些细节分享出来，和大家一起进行Vuew的学习与实战。

一、项目目录结构分析

这个项目的目录如下所示：



项目目录

其中assets目录下是图片资源以及css文件，components下为各个组件，views下为各个前端展示的页面，vuex下是用户信息的管理，采用的是Vuex的状态管理模式，routers.js为路由相关的定义，filters.js为过滤器，入口即是main.js。

运行项目后的效果如下：



效果

二、项目加载过程分析

首先页面加载过程我们首先看到一个logo：



logo

两秒之后，出现加载的动画之后，进入列表展示的页面：



动画

（1）页面的跳转是通过路由来实现的，我们看routers.js这个文件：



routers.js



routers.js

路由表定义了很多页面，我们这一节只关注Home和List，Home加载的是views目录下的index.vue页面。



index.vue

index.vue中只包括一张图片：<img class="index" src="../assets/images/index.png">，在js中有如下的代码片段：



mounted

这里mounted的用法我们来看以下vue的生命周期：



vue生命周期

mounted挂在实例，el被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子。如果
root 实例挂载了一个文档内元素，当mounted 被调用时 vm.$el也在文档内。

Vue实例挂载之后，首先加载了home页面，展示了log，同时执行setTimeout方法。HTML
DOM Window 对象的setTimeout用于在指定的毫秒数后调用函数或计算表达式，这里我将2秒延迟到10秒，使log显示的时间更长方便我们察看，10秒之后页面跳转到List视图。

this.$router.push({

name: 'list'

});

（2）动画的效果是怎么产生的呢？

所有页面都会有转圈的动画，在assets/scss/common/common.scss中，有如下的css代码片段：

body {

height: 100%;

width: 100%;

font-size: 14px;

color: #313131;

overflow-x: hidden;

line-height: 1;

background: url('../images/loading.gif') no-repeat center 250px;

}

定义了gif图片，动画效果就产生了。下一篇文章我们重点介绍路由的过程。