Vue2.0 + vue-router + Vuex实战演练

项目GitHub地址:  https://github.com/RobbieXie/vuex-simple-demo


先说说项目吧,导师让做一个陈年老项目WebGIS的重构,前端我们选择了没接触过的Vue,听说很不错,特地试一试,我们抛开业务不谈,在项目中我们使用了Vue2.0+VueRouter来控制页面显示和路由,通过Vuex来管理一些全局信息,比如用户Session信息等。

界面如下:

Vue2.0 + vue-router + Vuex实战演练_第1张图片Vue2.0 + vue-router + Vuex实战演练_第2张图片Vue2.0 + vue-router + Vuex实战演练_第3张图片


如图所示,我们的主页由4部分构成,左侧导航栏、顶部header栏、中间主页栏和底部栏。底部css手机端没设好,没有显示出来。。。。

我们通过vuex来管理了登陆信息,当登陆的时候,header和mainpage都会显示用户名信息,当没有登陆的时候,顶部header会提示login链接。

整体上,这是一个通过vue实现的单页面应用。

Vue2.0 + vue-router + Vuex实战演练_第4张图片

目录上我们选择了vuex官网推荐的目录结构。 并分离了actions getters modules,具体的代码可以clone下来跑一下便知道其中原理的,有关vuex管理全局变量的教程我们全部参考了官网:http://vuex.vuejs.org/zh-cn/actions.html


总体来说,vue非常的好用,整体结构简洁明了,学起来也并不复杂难懂。推荐大家以此demo为例子,深入学习下vue!

你可能感兴趣的:(前端学习)