哈喽大家周五好，又是一个开开心心的周五了，接下来就是三天小团圆啦，这里先祝大家节日快乐咯，希望都没有加班哈哈，今天公司发了月饼，嗯~时间来不及了，上周应该搞个活动抽中几个粉丝发月饼的，下次吧，这里先预告一下，圣诞节活动，给粉丝送苹果吧哈哈，不过听起来好 low 呀，大家有好的想法可以下边评论或者来群里一起交流哟~
说接上文，昨天咱们第一次的接触到了一个新的框架 Nuxt《二七║ Nuxt 基础：框架初探》，从概念上，给大家简单说了下这个框架的产生和应用场景，大家学习这一块一定要有一定的 vue 基础，还有就是了解 s-s-r 服务端渲染的知识和原理，才能做到游刃有余，在之前的一系列文章中，咱们已经很详细说明了 vue 的客户端渲染 SPA 的工作原理，今天呢，咱们就重点说一下 Nuxt 的运行机制，虽说 Vue 已经发展了近两年，不过网上的资料还是比较匮乏，所有的教程也都是一篇搞定，直接就是 如何安装，如何写页面，我是不喜欢这样的，虽然自己懂得的也不是很多，但是还是想给大家分享下，至少往深层次挖掘一下，这样大家下次使用的时候，心里才有一个普。好啦，马上开始今天的讲解，今天没有涉及到代码，源码会在下周开始 Code 。
零、今天要完成绿色的部分
一、Nuxt 的初衷 —— 将核心专注于UI渲染
来个官方的说法
Nuxt.js is a minimalistic framework for server-rendered Vue applications (inspired by Next.js)
意思就是：
Nuxt 是服务器呈现的简约应用程序的框架，通过对客户端和服务端基础架构的抽象，Nuxt.js 可以让开发者更专注于页面的UI渲染。作用就是在 node.js 上进一步封装，然后省去我们搭建服务端环境的步骤，只需要遵循这个库的一些规则就能轻松实现 s-s-r。
说到这里大家可能稍微不是很明白，举个最简单的栗子（ 这里就不说那个老生常谈的 SEO 了，这个本来就不存在于我们的客户端渲染中 ）：咱们之前在用 vue-cli 脚手架搭建项目的时候，每次添加一个页面，都需要去配置路由 router ，是吧，然后呢，有时候运气不好了，在多层嵌套的路径配置时候，还时不时的不起作用，这些本来不应该属于我们开发的工作的，Nuxt 就很好的解决了这个问题，Nuxt.js 根据 pages 目录结构去生成 vue-router 配置，也就是说 pages 目录的结构直接影响路由结构，还是实时监听的方式。
再举个栗子：之前咱们在配置页面的时候，都是通过 index.html 提供一个模板，然后再一个 app.vue 的入口程序，然后将所有的 *.vue 组件通过路由填充进去，这个咱们第一次使用的时候，感觉还是很嗨皮的，不过长时间的使用的时候，就会发现其实有些问题，比如我们如果不想让某些组件路由显示出来，然后只能在配置里处理，通过配置路由是否显示等操作，显然又多了一个步骤，不过在 nuxt 框架中，我们有了动态路由，只需要在名字前加上一个下划线 _ ，比如 _id.vue ，这样就能轻松搞定，是不是很方便，这个咱们以后会讲到，这里暂时就不深入了。
再比如我们在之前说到组件的时候，用到了这个图，在入门页面中，将我们的所有组件按需加载，但是如果我们的项目有多个布局需要怎么办？比如我们商城首页，和个人中心首页有时候是不一样的，当时如果你一定要保持一个风格也是可以的，但是感觉这么配置还是怪怪的。
不过在 Nuxt.js 框架中，我们有了新的变化，layouts对应目录中的layouts文件夹，默认pages下的页面走的都是 layouts/default.vue 布局方式，但是如果自己定义的话，也可以新增新的布局页。其中<nuxt/>可以类似vue中slot插槽的概念，（如果对 slot 插槽不是很明白，可以看之前的文章 《二十║Vue基础终篇：组件详解+项目说明》的第四节），pages/**.vue中的内容会插在<nuxt/>内。
在咱们的第二个项目，基于 Nuxt 的个人博客里，我就新建了一个 blog.vue 的布局页面，定制了一个博客布局：