一、Nuxt 简介

uxt 是一个更高级别的 Node.js web 开发框架，用于创建 Vue 应用，可在两种不同模式下开发和部署：通用（SSR）或单页应用（SPA）。此外，您可以在 Nuxt 中将 SSR 和 SPA 部署为静态生成的应用。即使您可以选择 SPA 模式，Nuxt 的全部功能仍在于其通用模式或用于构建通用应用的服务器端渲染（SSR）。通用应用用于描述可以在客户端和服务器端执行的 JavaScript 代码。

(资料图片)

为什么要使用 Nuxt？

Nuxt 等框架的存在是因为传统 SPA 的缺点和多页应用（MPAs的服务器端呈现）。我们可以将 Nuxt 视为服务器端渲染 MPA 和传统 SPA 的混合体。因此，它被称为“普遍的”或“同构的”。因此，能够进行服务器端渲染是 Nuxt 的定义特性。

二、什么是SSR？

SSR是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

实现原理：

1. 客户端发送请求给服务器
2. 服务器查询数据库，使用视图、模板引擎等拼接成html字符串，返回给客户端
3. 客户端渲染html

优点：

1. 网页内容在服务器端渲染完成，一次性传输到浏览器，所以首屏加载速度非常快
2. 有利于SEO，因为服务器返回的是一个完整的html，在浏览器可以看到完整的dom，对于爬虫、百度搜索等引擎就比较友好

缺点：

1. 在后续跳转其它链接时，整个页面还要重复这样的操作，不断地请求响应、请求响应，相对来说，消耗的带宽资源、后续请求的时间就多了

单页应用SPA：

单页应用其优秀的用户体验，使其逐渐成为主流，页面内容由js渲染出来，这种方式称为客户端渲染。它的过程是：

1. 客户端发送请求给服务器
2. 服务器返回html，但这时的html只有基本的结构（比如vue中，只有app这个div结构），没有其他具体的dom结构
3. 客户端渲染html，渲染执行js（比如vuejs），渲染模板template，这时候会再向服务器发送请求，请求具体的数据
4. 服务器查询数据库，返回对应的数据
5. 客户端渲染显示

缺点：

1. 网速很慢的时候，它的首屏等待时间较长
2. SEO不友好，暴露给搜索引擎只有最基本的html结构(比如：
   )

如何搭建你的nuxt应用

1.yarn create nuxt-app <项目名>

执行完命令后会初始化一个nuxj.js的项目

asset:资源目录assets用于组织未编译的静态资源如LESS、SASS或JavaScript,图片和css等静态文件都要存放的asset目录下，否则打包之后会出现找不到资源的情况

components：组件目录，用来存放自定义组件的目录，跟一般的vue组件没有区别

layouts：布局目录，可以在里面写默认布局文件，注意默认布局文件的名称必须是default.vue，并且layouts文件夹的目录没有必要的情况下不要更改。注意：default.vue默认是不存在的，如果要改布局需要自己添加

middleware目录用于存放应用的中间件。中间件可以理解为经过不同的路由时都会执行的函数，这里我没有使用就不再赘述可以自己看文档https://www.nuxtjs.cn/guide/routing#%E4%B8%AD%E9%97%B4%E4%BB%B6