十次方前端系统开发v1.0--第5章.pdf

第5章 网站前台-活动与招聘 学习目标： 掌握NUXT框架的基本使用方法 完成十次方网站前台的搭建 完成十次方网站前台活动模块的功能 完成十次方网站前台招聘模块的功能 1 服务端渲染技术NUXT 1.1 什么是服务端渲染 服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客 户端通过AJAX获取数据。 ​ 与传统 SPA （SingleA pplication - 单页应用程序）相比，服务器端渲染(SSR) 的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页 面。 ​ 请注意，截至目前，Google 和 Bing 可以很好对同步 J avaScript 应用程序进行索 引。在这里，同步是关键。如果你的应用程序初始展示 loading 菊花图，然后通过 Aj ax 获取内容，抓取工具并不会等待异步完成后再行抓取页面内容。也就是说，如果 SEO 对 你的站点至关重要，而你的页面又是异步获取内容，则你可能需要服务器端渲染(SSR)解 决此问题。 ​ 更快的内容到达时间(time-to-content) ，特别是对于缓慢的网络情况或运行缓慢的 设备。无需等待所有的 J avaScript 都完成下载并执行，才显示服务器渲染的标记，所以 你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于 那些 「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲 染(SSR)至关重要。 1.2 什么是NUXT Nuxt.j s 是一个基于 Vue.j s 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充 当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。 官网网站： https://zh.nuxtj / 1.3 NUXT环境搭建 （1）我们从网站上下载模板的压缩包  starter-template-master.zip 解压，修改 template 目录目录的package.j son中的名称 （2 ）在命令提示符下进入该目录下的template 目录 （3 ）安装依赖 cnpm install （4 ）修改package.j son      name: tensquare,    （5）修改nuxt.config.j s   title:  十次方  （6 ）测试运行  npm run dev 1.4 NUXT 目录结构 （1）资源目录 assets  用于组织未编译的静态资源如 LESS、SASS 或 J avaScript 。 （2 ）组件目录 components 用于组织应用的 Vue.j s 组件。Nuxt.j s 不会扩展增强该目录下 Vue.j s 组件，即这些组件 不会像页面组件那样有 asyncData 方法的特性。 （3 ）布局目录  layouts 用于组织应用的布局组件。 （4 ）页面目录  pages 用于组织应用的路由及视图。Nuxt.j s 框架读取该目录下所有的 .vue 文件并自动生成对 应的路由配置。 （5）插件目录  plugins 用于组织那些需要在 根vue.j s应用 实例化之前需要运行的 J avascript 插件。 （6 ）nuxt.config.j s 文件 nuxt.config.j s 文件用于组织Nuxt.j s 应用的个性化配置，以便覆盖默认配置。 1.5 NUXT快速入门