用vuejs 快速构建前后端分离的单页应用

why？

    单页应用可以很好的实现前后分离，页面的渲染，路由的跳转都叫给前端处理，后端只负责提供数据接口。

首先我们来看下慕课网首页,典型的多页电商应用。像这样一个应用我们可不可以把它重构成一个单页应用呢？又有那些难点呢？

难点1

如何实现前端登录，以及权限管理

难点2

前端如何实现路由跳转

结合需求，从angularjs，reactjs，vuejs中，我选择了vuejs。

主要技术栈

nodejs+webpack+vuejs+vuex+axios+vue-router+elementUI

下面开始前端项目的构建

首先确保你的电脑安装了nodejs

step1.  安装vue脚手架

 npm install -g vue-cli

step2.安装webpack 

npm install -g webpack

step3. 初始化一个vue项目

vue init webpack robinblog

期间提示是否安装vue-router 我们选是，其他默认即可

生产的项目 目录结构如下

然后cd 到当前目录 执行 npm isntall  安装项目依赖

前端登录 和路由跳转

使用v-router中勾子函数拦截 需要登录路由，具体实现如下

pages 目录下是页面，页面中的其他元素我都定义成了单个的组件（components），然后按需加载即可。

最终效果 如下 ， 一个电商网站 的基本功能，不到2天基本搞定，快的连我自己都不敢相信

可以预见，以后越来越多的的网站都会以单页应用的形式开发。