服务端渲染技术NUXT

服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容，而不是在客户端通过AJAX获取数据。
与传统 SPA（Single-Page Application - 单页应用程序）相比，服务器端渲染(SSR)的优势主要在于：更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。

NUXT： Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充
当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

• 如何搭载NUXT环境：
  • 下载starter-template-master.zip并进行解压：下载地址
  • 进入该解压文件夹下的template目录使用cnpm install或npm install下载依赖
• NUXT目录结构:
  • assets：资源目录；用于组织未编译的静态资源如 LESS、SASS 或 JavaScript，还有包括图片视频等文件。
  • components：组件目录；用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件
    不会像页面组件那样有 asyncData 方法的特性。
  • layouts：布局目录；用于组织应用的布局组件。
  • pages：页面目录；用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对
    应的路由配置
  • plugins：插件目录；用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
  • nuxt.config.js 文件：nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

启动：

在template目录下使用npm run dev即可启动该项目，但是会报错：

这是由于package.json文件未设置name键值，设置即可：

之后便可通过本地端口3000进行访问。

地址栏显示的{{name}}是由于nuxt.config.js的title进行控制的，可修改其的值来控制地址栏的显示。

布局：

由layouts文件下的default.vue控制。
因为大多数网站的头部和尾部都是相同的，我们就可以通过default.vue将网站的头部和尾部进行提取，形成布局页面。为NUXT默认引入的内容，即pages下的index.vue文件。
比如：

<template>
  <div>
    <header>某某网站或某某平台</header>
    <nuxt/>
    <footer>版权所有：R</footer>
  </div>
</template>

实现效果：

页面路由：

template文件夹并不存在router文件夹，这是由于NUXT的路由都是根据pages文件夹下的vue文件来自动生成的。
那么，我们如何来创建相应的文件和路由呢？

• 方法一：在pages文件夹下自定义一个vue文件，这里以test.vue为例：
  
  那么这个时候，我们就可以通过http://localhost:3000/文件名(除去文件后缀名)即http://localhost:3000/test去访问我们自己定义的路由：
  
• 方法二：在pages文件夹下自定义一个test文件夹，当我们使用http://localhost:3000/test去访问时，会默认去找pages文件夹下的test文件夹内的index.vue作为内容显示。
  
  如果同时存在pages文件夹下同时存在test.vue和test文件夹(包含index.vue文件)，会优先选择test.vue
  而如果我们要访问http://localhost:3000/test/test,就不能在pages下使用vue文件的方法，只能定义一个test文件夹，在该文件夹下编写test.vue进行访问，或者在test文件夹下再定义一个test文件夹并在该文件夹内编写index.vue文件。

动态路由：

如果我们要从一个商品列表页跳转到某一个商品的详情页，那就需要使用动态路由，NUXT的动态路由是以下划线开头的vue文件，参数名为下划线后边的文件名。这里以http://localhost:3000/test/id为例，假设test为某某事物的集合，我们要访问集合中的第一个，那编写的路由地址就是http://localhost:3000/test/1，这个时候我们就需要在test文件夹下定义一个_id.vue文件：


而如果我们要进行分页，也就是:http://localhost:3000/test/limit/page；需要同时传递limit和page两个参数时，我们可以通过在test文件夹下编写_.vue文件来进行匹配。
更多的请参考NUXT的官网：https://zh.nuxtjs.org/guide/routing/

页面中获取到传递的参数：

当我们设置了动态路由后，如何获取到路由中的参数呢？
我们可以通过{params}来获取：

params代表路由中参数的集合，我们可以通过params.参数名来获取参数。

为什么说NUXT是服务器渲染：

这里就要提到上面调用的asyncData方法，asyncData为NUXT中在页面显示前调用的方法，也就是通过路由找到该内容时，在页面显示前，就会进行数据的加载，并将其渲染到页面中，然后再显示到浏览器(客户端)中。
如上图，我使用console.log()打印文本内容并不会在浏览器的控制台中输出，而是会在我们的cmd窗口，也就是服务器中输出：

浏览器中右击查看网站的源代码我们可以发现数据一开始就已经存在在页面中，这就是服务器渲染：

关于NUXT的介绍就到这里。