学习目标：
- 掌握NUXT框架的基本使用方法
- 完成十次方网站前台的搭建
- 完成十次方网站前台活动模块的功能
- 完成十次方网站前台招聘模块的功能
服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
与传统 SPA（Single-Page Application - 单页应用程序）相比，服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
请注意，截至目前，Google 和 Bing 可以很好对同步 JavaScript 应用程序进行索引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Ajax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解决此问题。
更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。
Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。
官网网站：
https://zh.nuxtjs.org/
（1）我们从网站上下载模板的压缩包 starter-template-master.zip 解压，修改template目录目录的package.json中的名称
（2）在命令提示符下进入该目录下的template目录
（3）安装依赖
（4）修改package.json
（5）修改nuxt.config.js
（6）测试运行
（1）资源目录 assets
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
（2）组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
（3）布局目录 layouts
用于组织应用的布局组件。
（4）页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
（5）插件目录 plugins
用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
（6）nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
1.5.1 定义布局
我们通常的网站头部和尾部都是相同的，我们可以把头部为尾部提取出来，形成布局页
修改layouts目录下default.vue
<nuxt/>为内容的区域
1.5.2 页面路由
在page目录创建文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y8r2LAQ8-1583990044377)(image/5-1.jpg)]
recruit目录创建index.vue
gathering目录创建index.vue
NUXT的路由是根据目录自动生成的，无需手写。
修改default.vue，header中添加导航链接
点击导航链接，测试路由效果
1.5.3 数据渲染
（1）安装axios，用于异步获取数据
（2）修改gathering目录的index.vue
asyncData是用于异步加载数据的方法
1.5.4 动态路由
如果我们需要根据ID查询活动详情，就需要使用动态路由。NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名
创建pages/gathering/item/_id.vue
我们在地址栏输入 http://localhost:3000/gathering/item/1 即可看到运行结果
在活动列表页点击链接进入详情页
使用v-for’更新已渲染’的元素列表时,默认用就地复用策略;列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素;
目前 的作用和 一致 ，都是进行路由的跳转。
（1）拷贝静态资源：将静态原型中的css、img、plugins目录拷贝至assets目录下 。
（2）我们参照静态原型中的activiti-index.html页面来编写网站的通用布局，即网站的头部和尾部
修改layouts下的default.vue，内容如下：
修改pages/index.vue ,内容如下：
参考headline-login.html页面构建，拷贝代码后将https://blog.csdn.net/douxubao/article/details/104817055/批量替换为~/assets/
按照上述方法构建以下页面
（1）建立pages/qa/index.vue （问答首页）
（2）建立pages/gathering/index.vue（活动首页）
（3）建立pages/friends/index.vue（交友首页）
（4）建立pages/spit/index.vue （吐槽首页）
（5）建立pages/recruit/index.vue （招聘首页）
修改layouts/default.vue
详见官方文档：
https://router.vuejs.org/zh-cn/api/router-link.html
3.1.1 数据渲染
我们这一步将读取模拟的动态数据来完成服务端数据渲染部分
（1）创建utils文件夹，utils下创建request.js ，用于封装axios
（2）创建api文件夹，将管理后台工程的api/gathering.js 拷贝到api文件夹
（3）修改pages/gathering/index.vue
（4）为了实现完美的测试效果，我们修改easyMock接口
URL:/gathering/gathering/search/{page}/{size} (post)
3.1.2 瀑布流组件
我们这里使用的瀑布流组件vue-infinite-scroll，安装：
代码实现
（1）plugins下创建vue-infinite-scroll.js
（2）修改nuxt.config.js
（3）修改页面pages/gathering/index.vue
添加pageNo用于记录页码
编写方法loadMore
3.2.1 活动详情页构建
修改pages/gathering/item/_id.vue 内容根据静态原型页面activity-detail.html构建 ，代码略
3.2.2 数据渲染
修改pages/gathering/item/_id.vue
3.2.3 分享组件
Share.js是一款一键转发工具，它可以一键分享到新浪微博、微信、QQ空间、QQ好友、腾讯微博、豆瓣、Facebook组件、Twitter、Linkedin、Google+、点点等社交网站，使用字体图标。
以下步骤可以实现微博和微信分享
（1）修改pages/gathering/item/_id.vue的脚本部分。以下代码用于引入外部的js .我们这里的js采用cdn方式引入 地址为：
https://cdn.bootcss.com/social-share.js/1.0.16/js/social-share.min.js
所需要的样式： https://cdn.bootcss.com/social-share.js/1.0.16/css/share.min.css
（2）修改pages/gathering/_id.vue的页面部分，在合适的位置添加分享按钮
选项：
以上选项均可通过标签 来设置
4.1.1 编写API方法
（1）将管理后台的api/recruit.js和api/enterprise.js 拷贝到当前工程的api文件夹下
（2）修改api/recruit.js，增加方法
（3）修改api/enterprise.js，增加方法
4.1.2 招聘列表页数据渲染
修改pages/recruit/index.vue axios.all可以并发多个异步请求，axios.spread负责获取多个异步请求的返回结果。
模板部分代码：
4.2.1 构建招聘详情页
（1）构建招聘详细页 pages/recruit/item/_id.vue
（2）修改pages/recruit/index.vue 链接
4.2.2 招聘详情页-渲染招聘信息
修改 pages/recruit/item/_id.vue
4.2.3 招聘详情页-渲染企业信息
修改 pages/recruit/item/_id.vue，以嵌套方式加载企业信息
修改 pages/recruit/item/_id.vue页面模板部分
LOGO
企业名称：
企业简介：
企业标签：
企业主页和企业职位数:
为了达到良好的测试效果，建议修改以下easyMock的数据
/recruit/enterprise/{enterpriseId} (GET)