@H_3010@Nuxt
@H301_0@随着现在vue和react的流行，许多网站都做成了SPA，确实提升了用户体验，但SPA也有两个弱点，就是SEO和首屏渲染速度。为了解决单页应用的痛点，基于vue和react的服务端渲染应运而生。由于公司的框架采用的是vue，所以就简单的研究了一下基于vue的服务端渲染框架——NUXT。在vue的官网有关于服务端渲染的详细介绍，而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置，也集成了Vue2、vue-router、vuex、vux-Meta（管理页面Meta信息的），利用官方的脚手架，基本上是傻瓜式操作，不用写路由配置，不用写webpcak配置就可以跑起来一个基于服务端渲染的SPA。
@H_3010@
Nuxt特性
@H301_0@
NUXT的特性包括：
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 列表项目
- 支持各种样式预处理器： SASS、LESS、 Stylus等等
Nuxt目录结构
@H_301_0@通过vue init nuxt-community/starter-template 生成的文件目录结构如下：
Nuxt保留的，不可以更改，需要注意一下。
@H_301_0@Nuxt路由
@H_301_0@Nuxt中的一大特点就是路由无需手动配置，会根据pages下的文件路径自动生成一套路由。如果路由中需要带参数，只需将pages下的文件已下划线_作为前缀即可。例如pages下的目录结构如下：
Nuxt自动生成的路由配置为：
pages/users/_id.vue文件中
true， Nuxt 将自动加载显示 404 错误页面。而这个错误页面需要写在指定的位置，也就是layout中error页面。接下来就来介绍有关视图相关的东西。
@H_301_0@Nuxt视图
@H_301_0@可以在layouts目录下创建自定义的布局，可以通过更改layouts/default.vue 文件来扩展应用的默认布局。需要在布局文件中添加 self-aside的模板
@H_301_0@以上所说的都是有关布局和路由相关的东西，而还没有讲到有关服务端渲染的知识，究竟 Nuxt 是如何做到SSR的呢，关键人物要出场了。
@H_301_0@Nuxt asyncData 方法
@H_301_0@Nuxt 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。这个函数可了不得了，有了它，我们可以先从服务员拿到数据，在服务端解析好，拼成HTML字符串，返回给浏览器。
@H_301_0@asyncData方法会在组件每次加载之前被调用，它可以在服务端或路由更新之前被调用。 可以利用 asyncData方法来获取数据，Nuxt 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。这个方法只能用在页面组件中，在componets下在公共组件是不能调用该方法的，Nuxt 不会扩展增强该目录下 Vue 组件。
@H_301_0@因为 asyncData 方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
