共计 1162 个字符，预计需要花费 3 分钟才能阅读完成。
背景
由于面试总被问到关于 ssr 的问题，于是自己想搞一套服务端渲染。后来发现直接手动配置会有很多坑，与前端的朋友交流，给我推荐了 nuxt，下面将研究的初步了解记录下来。
简介
Nuxt 是基于 Vue 的一个应用框架，采用服务端渲染，使你的 SPA 应用 (Vue) 也可以拥有 SEO。
实践
1. 创建项目
$ npm install -g vue-cli
$ vue init nuxt/starter <project-name>
$ cd <project-name>
$ npm install
$ npm run dev
2. 项目目录 |– assets // 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript|– components // 用于自己编写的 Vue 组件，比如波动组件、日历组件、分页组件 |– layouts // 布局目录，用于组织应用的布局组件，不可更改 |– middleware // 用于存放中间件 |– pages // 用于存放写的页面，我们主要的工作区域 |– plugins // 用于存放 JavaScript 插件的地方 |– static // 用于存放静态资源文件，比如图片 |– store // 用于组织应用的 Vuex 状态管理 |– .editorconfig // 开发工具格式配置 |– .eslintrc.js // ESLint 的配置文件，用于检查代码格式 |– .gitignore // 配置 git 不上传的文件 |– nuxt.config.json // 用于组织 Nuxt.js 应用的个性化配置，已覆盖默认配置 |– package-lock.json // npm 自动生成，用于帮助 package 的统一设置的，yarn 也有相同的操作 |– package.json // npm 包管理配置文件
原理
Nuxt.js 通过一系列构建于 Vue.js 之上的方法进行服务端渲染，具体流程如下:
调用 nuxtServerInit 方法
当请求打入时，最先调用的即是 nuxtServerInit 方法，可以通过这个方法预先将服务器的数据保存，如已登录的用户信息等。另外，这个方法中也可以执行异步操作，并等待数据解析后返回。
Middleware 层
经过第一步后，请求会进入 Middleware 层，在该层中有三步操作：
读取 nuxt.config.js 中全局 middleware 字段的配置，并调用相应的中间件方法 匹配并加载与请求相对应的 layout 调用 layout 和 page 的中间件方法
调用 validate 方法
在这一步可以对请求参数进行校验，或是对第一步中服务器下发的数据进行校验，如果校验失败，将抛出 404 页面。
调用 fetch 及 asyncData 方法
这两个方法都会在组件加载之前被调用，它们的职责各有不同，asyncData 用来异步的进行组件数据的初始化工作，而 fetch 方法偏重于异步获取数据后修改 Vuex 中的状态。