nuxt 简单介绍

背景

因为面试总被问到关于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 中的状态。