vue.js+vue-router+sea.js构建SPA应用

1.vue.js

2016年火热的框架，一款渐进式的前端开发框架，因为是中国人开发的，所以中文文档写的也十分不错。整体来说比较简单易学，很好上手，但是深入比较有难度

2.vue-router

vue全家桶的一员，为vue框架提供前端路由功能，比较简单，但也够用了

3.sea.js

前端模块化工具，可以动态的加载所依赖的模块，遵循CMD规则，十分简单，只要定义define()即可声明一个模块，通过require()即可引入一个模块，十分容易上手。但是这应该是一个已经落后的东西了吧？

整体架构说明

vue-router实现前端路由，每个页面对应一个vue组件，使用sea.js来实现动态按需加载。

整体目录结构为：

目录

|—css（全局需要使用的css文件）

|—img（图片）

|—lib（依赖的第三方类库，如vue.js，vue-router.js，sea.js）

|—js

|||||||—ajax.js（所有与后端交互的接口js代码）

|||||||—app.js（入口js）

|||||||—router.js（路由js）

|||||||—module（组件）

||||||||||||||||||||—component（组件名）

||||||||||||||||||||—component.js（vue组件）

||||||||||||||||||||—component.css（组件所需要的css）

||||||||||||||||||||—component.html（组件的模板）

这里组件的构成是，一个组件，由一个js文件和一个css文件和一个html文件组成，js文件是组件的vue组件的实现，css文件是组件所需要的样式，html是组件的模板文件，在一个组件的js文件里还需要require一个css文件和一个html文件，这样的做可以将组件的组成分离，易于维护，但也造成了每加载一个组件，不仅需要加载组件的js文件，还需要加载组件的css文件和html文件，这样就导致了用户的加载量大的问题。

ajax.js中写的是所有组件和请求后端api的代码，这里将这部分代码单独拿出来的目的是为了让组件和后端api解耦。组件现在不直接依赖后端api，而是依赖ajax.js中所暴露的方法，当后端api的请求地址改变时，直接修改ajax.js中的请求地址即可，不需要修改组件中的代码。ajax.js中提供一个request对象，所有的api请求方法都需要使用这个request对象构建，这样就可以在request对象中全局去处理一些问题，如未登录状态，token验证失败。

总结

并没有完全使用vue全家桶和node.js来构建项目是失误的一点，但是也降低了整体项目的上手难度，因为sea.js来做模块加载虽然落后，但却十分简单易用。缺点也十分明显，每加载一个组件，都需要加载其对应的css文件，js文件，html文件，增加了浏览器的请求量，相比之下，就不如直接使用node.js来构建后缀为.vue的组件。目前组件的结构是模范.vue的思路来实现的，但是导致请求量大这一点就很失败。

如果使用vue全家桶直接在node.js上来构建项目，可以将vue组件的代码压缩合并，vue-cli也可以直接生成vue项目的架子。

总体来说，这是一个适合中小型项目，易于上手，学习成本低的架构方案。正规套路还是应该使用node.js和vue全家桶来构建一个基于vue的SPA项目