Nuxt.js 小试牛刀

为什么要用Nuxt？

我们需要搜索引擎更多地抓取到我们的内容，更详细地认识到我们的网页结构，而不是仅对首页或特定静态页进行索引。

题外话：第三方的解决方案

可以建立HTTP一个中间层，在判断到访问来源是蜘蛛时，输出已缓存好的html数据，此数据若不存在，则调用第三方服务对html进行缓存，往复进行。

另一方法是自行构建蜘蛛渲染逻辑，当识别UA为搜索引擎时，拿服务端已准备好的模板和数据进行渲染输出html数据，反之，则输出SPA应用代码。

弊端：需要针对蜘蛛编写一套独立的渲染模板，因为大部分情况下SPA的代码是没法直接在服务端使用的，搜索引擎若检测到蜘蛛抓取数据和真实访问数据不一致，会做降权惩罚，也就意味着渲染模板还必须和SPA预期输出一模一样。

用户体验

当用户网络比较慢、或者带宽比较差的时候，通过减少页面请求数量，来保证尽快看到基本的内容。但是避免强制用户下载整个单页面应用，也远没有下载个单独的预先渲染过的HTML文件性能高。

Nuxt是什么？

pages：各页面组件，用于生成对应路由，支持嵌套，支持动态路由
components：各组件，用于你自己管理公共组件或非公共组件
layouts：宿主布局页面模板组件，用于你可以把不同的页面指定使用不同的布局
assets：用于webpack编译的各类资源，通常是一些小的资源，如代替雪碧图之类的图片等东西
middleware：中间件，首屏渲染和路由跳转前均执行对应中间件（登录态校验等），可以返回promise或直接next（很实用！）
plugins：插件，SPA中用的各类第三方组件和一些node模块都可以在这引入，甚至可以引入自己编写的第三方库
store：内置了vuex，可以直接返回数据模块或返回一个自建vuex根对象，具体要翻文档

路由（Routing）

常用的有这几种：Basic Dynamic Nested

Nuxt封装了路由的生成，你不需要额外编写路由，pages文件夹下的结构，会自动生成对应的路由。

从源码可以看到，路由的生成主要是在lib/build.js里面处理的，大致步骤如下：

通过glob获取pages下所有文件，得到数组
过滤掉pages和.vue等不相关的字符串
对带有_符号进行处理
处理动态路由和嵌套路由
对子路由排序

异步数据（Async Data）

支持Promise async/await callback

在组件结构中，其属于宿主layout下的子组件，不属于页面组件，无法使用页面组件中的fetch方法，官方的解释是子组件无法使用阻塞异步请求，即：子组件得到的异步数据无法用于服务端渲染，这对于程序是合理的，避免异常阻塞，简化业务模型。

如果需要这些异步数据增强站内内链SEO，我们可以巧妙地使用内置vuex中的nuxtServerInit这个API，这个API实在nuxt程序实例化之后第一次执行的方法，其内部返回一个promise，我们可以在这里完成我们站内的所有子组件异步请求，随后将数据映射至对应子组件即可。

另外的方法是在mounted 方法去调用异步数据。

注：在这个data方法里面，我们获取不到 this指针，因为data方法在组件初始化之前就已经被调用了。

指令（Commands）

&amp;amp;amp;lt;img src="https://pic4.zhimg.com/v2-051ebd48b48075430e287061498d5d63_b.png" data-rawwidth="909" data-rawheight="266" class="origin_image zh-lightbox-thumb" width="909" data-original="https://pic4.zhimg.com/v2-051ebd48b48075430e287061498d5d63_r.png"&amp;amp;amp;gt;