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中只包括一张图片：

，在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图片，动画效果就产生了。下一篇文章我们重点介绍路由的过程。