【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编译版本有问题: 解决办法是升级backpack-core@0.3.0backpack-core@0.7.0

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

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

解决办法是:在nuxt.config.js里找到eslint-loaderctx.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 中文文档

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

结尾


如若本文有瑕疵需修改的地方,请提出来,谢谢您的贡献!

欢迎关注微信公众号:小狮子前端Vue

谢谢您的支持!✿✿ヽ(°▽°)ノ✿

学如逆水行舟,不进则退
  • 2
    点赞
  • 5
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页

打赏

一百个Chocolate

千万不要打赏,千万不要,就白嫖

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值