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

Logo

前往低代码交流专区

更多推荐