领券联盟-前端版本-PowerByNuxt.js

既然有一套api，我们把android端的做了，顺便就把pc端也做了吧！

效果应该跟这个差不多

阳光沙滩商城

推广一下啦，同学们淘宝购物时，可以搜索一下有没有优惠券，通过我们的链接购买，我们会得到一定的佣金。

目前这个商场不是使用Nuxt.js来实现的，使用thymeleaf+vue.js

你右键查看源码，会发现，还是很整齐的

但是我们的sunofbeach.net主站，是使用nuxt.js做的

当你右键查看源码时：

顺便再说说，我们的mp.sunofbeach.net是使用vue.js写的

所以你右键查看源码：

就这么一点

这三种方式有什么不一样呢？

• thymeleafe

这种属于模版引擎类型，也就是把数据跟html结合到一起。展示给用户看。可以在服务端完成渲染，也可以在客户端通过JS完成异步渲染。

优点：有利于SEO，源码也很规整 缺点：不能前后端分离开发，前端人员写好了样式和html，交给后台开发人员整合到web中

• vue.js

这种属于客户端渲染，有生命周期，就像android一样。我们在特定的声明周期去加载数据，而且数据跟布局相互绑定，所以修改UI特别方便，数据变则UI变。

优点：客户端渲染，减少服务端的性能开支；可以前后端分离开发，相互独立，提高开发效率和有利于项目管理。数据双向绑定，渲染非常方便。 缺点：不利于SEO 应用场景：一般开发管理后台，比如说我们阳光沙滩的用户中心，我们的内容不需要被搜索引擎收率，所以管理中心就使用vue.js进行开发

• nuxt.js

其实nuxt.js是基于vue.js的一个框架。它支持服务端渲染，也支持客户端渲染。这样子就解决了vue.js的seo问题了，所以我们阳光沙滩的前端使用的是nuxt.js开发的。它可以前后端分离开发，又利于seo，所以就使用nuxt.js了。

优点：有利于seo优化，可以前后端分离开发 缺点：需要点用较多的服务端资源，高并发访问，可以做一些缓存处理，或者可以根据用户登录状态判断，没登录的服务端渲染，登录录了客户端渲染，可以减轻一下服务器的负担。

领券联盟-前端版本

我们有了api，可以前后端分离。可以独立整一个前端出来。

这个课程并非专业的前端课程，只能说可以满足需要做毕业设计的同学们。学习过程中，可以类比android进行学习。这样子就比较容易理解了。

相关技术了解

vue.js官网

nuxt.js官网

自行搭建一下node.js环境

IDE我们使用WebStorm

相关的参考资料

Nuxt.js，Vue服务端渲染技术SSR

node.js，npm，vue.js，next.js，webpack是什么关系呀？

starter-template,Nuxt.js手脚架，快速创建项目