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天基本搞定,快的连我自己都不敢相信
可以预见,以后越来越多的的网站都会以单页应用的形式开发。