一、 为什么选择nuxt？nuxt是什么？（why，what）
二、nuxt怎么用？（how）
一、为什么选择NUXT？NUXT是什么？[图片上传中...(image.png-c8fae-1653904279339-0)]
为什么选择nuxt框架？说白了选择NUXT框架就是为了做seo，之前常用的vue2，基本都是单页面应用，各种交互和渲染都是通过ajax请求数据，也就是客户端渲染的，一般业务ajax很好用，解决了不刷新页面就可以更新视图，但是对seo业务就不是很友好了。
seo通俗点儿讲就是提升网站的搜索排名，大家都知道，各大类搜索引擎都有自己的爬虫系统，以百度搜索为例子，大家把百度的爬虫叫“蜘蛛”，为什么叫蜘蛛呢，拿之前做的项目深蓝保官网为例子（https://www.shenlanbao.com/zhishi/news ），页面由列表页，详情页，标签页，还有若干公共组件组成，这些链接相互跳转，提升了相关性，假如官网某一个页面被百度收录了，用户进来咱们的这个页面就可以通过这个页面中的入口到别的相关的页面去，其他的页面也可以跳回来，自然而然就形成了类似于蜘蛛网的这么一个结构，NUXT框架中，我们在写页面跳转的时候，尽量用<a>标签，这样才能更好的让蜘蛛通过<a>标签的href去爬咱们的网站的源码（展示源码）
上家公司官网没有重构之前没有去做SEO，也就没有这么多<a>标签（href）跳转，基本都是通过点击事件，用window.open，或者location.href，this.$router.push，这种方法去跳转到相应的地址的，导致源码中没有对应的url地址，SEO的友好度是不高的，其次就是源码中要有页面内容，包括img的url地址，链接（URL）地址，有助于爬虫对咱们的页面进行定位和定义，你去迎合了爬虫的规范，SEO能力增加，自然而然网站的收录量，SEO流量就会得到一个不错的提升。
当然做SEO，我们前端的代码层面上也是要有一定的规范的，比如说，尽可能的用语义化标签，<p>，<header>， <nav> 这些平时可用可不用的标签，尽量就要用起来了。每个页面的title，description，keywords，这些虽然在如今的年代，已经没有SEO刚火起来的时候那么重要了，但是也是要按照内容去配置上，因为这些也是对页面内容的一个汇总和介绍，更能让爬虫轻松的了解你这个页面的内容是什么。
总结一下：
1，页面相关性相关的内容一定要展示出来，a，img，title，descriotion，keywords，包括内容块。
2、前端代码遵循H5规范，语义化标签要明确。
3、内容相关的，希望被收录的页面（内容页），不要用客户端渲染，也就是ajax，例如element组件库中分页组件。
4、整站的页面之间要有联系，不要形成孤岛，互相穿插，互相联系，才能更好的提升整站的SEO排名
5、美团，todolist，gitlab等网站都在用NUXT做SEO，且语法和使用和vue2.0差别不大，容易上手
nuxt还有如下优点：
- 自动代码分层
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理（封装好的方法，直接用即可）
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器： SASS、LESS等等
二、nuxt怎么用？
nuxt是做服务端渲染的 ，怎么理解nuxt呢，vue有生命周期，大家不陌生，nuxt也有生命周期
nuxt的生命周期流程图就如上边所示，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端和客户端上，绿框内运行在客户端，红框、黄框内的周期都不存在Window对象，这时候，页面没有开始渲染的时候，nuxt的服务端就进行了一系列的请求，HTML拼接等操作，所以，到了客户端的生命周期，渲染速度很快，源码展示还完全，简称“又快又有”
结合着这个图，我大概讲一下我之前项目的结构
.nuxt 目录是我们 nuxt build 之后生成的目录，真正运行在实际项目中的也是读取的此目录，里面生成以后就是我们在创建项目时候编译好的对应框架的node项目，我之前选择的 express ，还有koa等。
assets 目录官方说明是放Less、Sass、Javascript的目录，这里我一般的理解与做法是放一些需要预编译的语言，比如我会把Sass代码放到这个文件夹内。
components 目录一般是我们放自定义组件的地方，这里我把组件拆分为公共组件以及功能组件都是按目录存放到此目录下
layouts 目录这一块是比较重要的，因为此目录主要是作为nuxt的布局目录，默认里面会有一个default.vue，我们在page里面不配置layout的情况下默认会采用 layouts/default.vue 这个布局来渲染我们的页面，我们可以自定义布局页面去使用。
middleware 目录是我们存放中间件的目录，可以在这个目录中创建一些获取服务端内容的一些js文件。
node_modules 依赖目录
pages 目录这个是核心目录了，所有的页面都会是来此这个文件夹里面，虽然官方也支持自定义路由，但是既然目录能够生成路由，我们就可以很好的利用这个来组织我们页面的层级关系；默认情况下我们的页面是会读取index.vue这个文件作为渲染页面，这里之所以没说是哪个index.vue，是因为url访问是那个层级，默认读取的就是哪个层级的index.vue文件。
plugins 目录是我们存放自定义插件的地方，还有像vant，qr这些，都可以在这个文件夹创建。 在nuxt.config.js引入就可以了，其实跟middleware的引入方式大同小异，不过这里无法获取到服务端的上下文!
static目录就是存放一些静态资源的地方，比如一些图片。
store目录存放vuex相关的文件夹
nuxt.config.js文件是nuxt项目的配置文件，这里可以配置很多项目相关的内容，比如我们的网站所有页面默认的标题、描述、关键词（TDK），第三方插件库的引用、服务端缓存，sitemap主动推送，gzip压缩，全局样式配置等等
NUXT健壮程度远不止这些，SEO经理提出的各种提升SEO友好度的需求，这个框架都能解决，且十分便捷
1：现成的TDK方法，让我们在配置不同页面的时候，调用一个方法，修改对应变量即可。
2：SEO需要sitemap主动推送给爬虫网站，NUXT可以提供sitemap插件，轻松完美解决。
3：SEO需要提供给谷歌，百度，头条，360等各大搜索引擎相关文章的时间因子，它也有配套的api。
4：随着SEO流量的提升，为了解决前端服务高并发导致的一些列问题，它也提供了前端服务端缓存api。
5：自定义404页面，301永久重定向方法，这些功能完美的契合了SEO的方方面面
接下来说明一下具体的代码块：
1、 这是nuxt的校验器
Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。这个的执行是优于asyncData（）方法的，
如果不符合咱们规则的参数可以直接return false，这样下边的asyncData（）方法就不用执行了，就直接终止了nuxt渲染页面，直接到404页面，seo中404页面还是挺重要的，假如上边的校验器没有写校验规则，那么下边asyncData执行完，结果没有请求回来数据，那么页面很可能是一个缺失中心内容的页面，这样的页面被搜索引擎抓取到，就会认为咱们的页面是劣质页面，进而影响爬虫爬取咱们网站的频率，影响SEO。
2、asyncData（）方法
通过了上边一关之后，才能来到这个方法，这个方法就是服务端请求数据的方法，这边请求回来的数据也有说法，假如返回回来的数据是空数据，且这个接口的数据是中心内容区的数据，那这个页面即使展示出去也是缺失中心内容的页面，还是会被判定为劣质页面，与其给爬虫展示空内容页面，还不如给它展示404页面，主动告知，搜索引擎，这个页面已经丢失，请清除收录。
拿知识详情举例子
https://www.shenlanbao.com/zhishi/2-124590
3、head（）
这个方法是SEO中做TKD（title，description，keywords）用的，每个页面的tdk可以根据内容去动态的渲染，这样在源码里才有展示，TDK也是SEO的提分指标之一，加入这个页面没有写TDK，那就会用config里默认的。
基本上可以看到，咱们vue中的一些函数，方法，这里用的很少，因为那是客户端用到的函数和方法。一般情况下，页面的点赞，登录这些接口才用到客户端渲染。
具体以后的服务器缓存，sitemap主动推送，时间因子这些概念和代码的落地，后续感兴趣可以在分享一下。
