【Vue全家桶+SSR+Koa2全栈开发】（六） Nuxt.js基础

写在开头

大家好，这里是 lionLoveVue，基础知识决定了编程思维，学如逆水行舟，不进则退。金三银四，为了面试也还在慢慢积累知识，Github上面可以直接查看所有前端知识点梳理， github传送门，觉得不错，点个Star★，好运连连，Offer终究鼠于你，持续更新中。另外，也可以关注微信公众号：小狮子前端Vue，源码以及资料今后都会放在里面。

Nuxt.js基础

Nuxt.js 是一个基于Vue.js的通用应用框架，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

基于Vue 2做的，包括Vue-Router，支持Vuex、Vue Server Render、vue-meta

Nuxt.js工作流

下图源自Nuxt官网，简单介绍一下它的工作流程

更多内容，请参考：nuxtjs 英文官方文档

参考：nuxtjs 中文文档

从浏览器发出一个请求，到最终服务端渲染完成，关于Nuxt的生命周期如下：

Incoming Request 浏览器发送一个请求
服务端检查是否有 nuxtServerInit 配置项，有的话就会执行这个函数，其中包含一个标注： Store action 用来操作 vuex
下一个环节就是中间件 middleware ，与路由相关，做任何你想要的功能
预验证 validate() 可以配合高级动态路由，做一些验证，比如是否允许跳转某个页面
asyncData() & fetch() 获取数据，前一个是用来渲染vue component，即 vue组件的，后一个通常用来修改 vuex，即 Store的
有了数据，模板后，最后一步就是 Render 渲染了，方式是 SSR

Nuxt.js 安装

如果没有安装vue cli的话，先全局安装一下

npm/cnpm install -g @vue/cli-init

vue init nuxt-community/koa-template nuxt_learn（这里填入你自己的文件名）

安装完成后，依次执行如下命令

cd nuxt_learn
npm install # Or yarn
npm install --update-binary
npm install ajv@^6（可选项，如果有报warn，就装一下）
npm run dev

如果安装过程网络有问题，报错了，可以试试用 cnpm或者

nrm use cnpm

eslint版本问题： 需要更新eslint版本

解决：执行如下代码：

npm install eslint-plugin-html@^3

执行完如下步骤后，最后一步，打开服务：

npm run dev

babel编译版本有问题： 解决办法是升级[email protected]到[email protected]

npm install backpack-core@0.7.0 --save-dev

解决上述问题后，编译能成功，但是客户端依旧运行报错

解决办法是：在nuxt.config.js里找到eslint-loader将ctx.isClient改成ctx.Client就可以运行了

参考：解决vue init nuxt-community/koa-template项目，安装报错问题

解决完上述问题后，执行如下指令：

npm run dev

访问：http://localhost:3000/ 出现如下界面，代表配置成功 ✿✿ヽ(°▽°)ノ✿

附：微信公众号：【小狮子前端】回复【nuxt-learn】即可获取本节源码

知识拓展

当使用 SSR 时， mounted 只在浏览器端渲染，而在服务器端不会渲染 ：浏览器通过axios请求的数据，只有 created 在开启SSR时会执行。

SSR原理：① 服务器端将编译好的内容（模板）下发（包括样式、内容、数据） ② 把异步获取的数据响应给浏览器端（把交互交给浏览器来完成）

SSR原理深入

我们打开页面源代码，查看一下：

服务器端渲染完页面后给浏览器端的html分了几个部分，第一个是样式 style ，第二个是模板内容，例如上图中圈中的蓝色部分，第三个是服务端拿到的数据结果，例如上图中圈中的红色部分，为什么服务端拿到的数据给到浏览器端呢？
这里我们得思考一个SSR的工作原理 了

如果不给数据的话，就是一个静态html模板，一个静态的内容，没有任何交互，那交互是在哪完成的呢？

交互是在浏览器端完成的，也就是说浏览器端会有一个入口，进行预编译，但不会再渲染页面了，因为服务器端已经在页面渲染过一次了。它要做的是创建一个虚拟的编译结果（可以理解为虚拟dom）， 和服务器端传过来的结果进行对比，如果有区别，它会重新请求数据。在nuxt项目中都是一套文件，没有特别指定是在浏览器端运行还是服务端运行，也就是SSR常说的同构，浏览器端编译虚拟dom，也依赖于 vue 文件，因此模板是有的，而编译这个dom，需要的是额外的数据，此数据是服务器端渲染之前请求而来的数据，如果数据不同步在浏览器端，编译出来的结果必然和服务器端编译结果不一致。

综上，服务器端异步获取的数据会同步在浏览器端，作对比，如果对比一致的话，浏览器端就会对对应的dom结点注册事件，达到交互作用。

更多内容，请参考：nuxtjs 英文官方文档

参考：nuxtjs 中文文档

以上，就是我们项目搭建所需的基础知识啦，已经整理完结啦，当然还有许多地方没有提及，读者可以去查阅一些官方文档来补充更多知识，下文我们将逐步深入全栈开发过程记录，制作不易，点赞收藏评论，一键三连一波~