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

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

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

界面如下：

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

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

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

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

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