背景

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