目录：

一、 为什么选择nuxt？nuxt是什么？（why，what）

二、nuxt怎么怎么用？（how）

一、为什么选择nuxt？nuxt是什么？

!18 为什么选择nuxt框架？说白了选择nuxt框架就是为了做seo，之前常用的vue2.0，基本都是单页面应用，各种交互和渲染都是通过axios和客户端渲染的，这当然没问题，做一个项目，用vue2.0的spa很通畅，很顺利，但是对于页面的seo就不是很友好了。!

!18 说一下我接触seo这几个月的理解：seo通俗点儿讲就是提升网站的搜索排名，大家都知道，各大类搜索引擎都有自己的爬虫系统，以百度搜索为例子，大家把百度的爬虫叫“蜘蛛”，为什么叫蜘蛛呢，拿咱们新官网知识模块为例子（https://www.shenlanbao.com/zhishi/news ），页面由列表页，详情页，标签页，还有若干公共组件组成，这些链接相互跳转，提升了相关性，假如官网某一个页面被百度收录了，用户进来咱们的这个页面就可以通过这个页面中的入口到别的相关的页面去，其他的页面也可以跳回来，自然而然就形成了类似于蜘蛛网的这么一个结构（上excel表格），因为我理解的是蜘蛛到其他页面只能通过爬源码中a标签的href去到达，所以咱们的源码里要尽可能的有咱们的a标签和地址，这样才能更好的让蜘蛛通过a标签的href去爬咱们的网站的源码，我给大家展示一下网站源码
之前咱们老官网没有刻意的去做SEO，也就没有这么多a标签（href）跳转，基本都是通过点击事件，用window.open,或者location.href这种原生的方法去跳转到相应的地址的，没有用a标签的href，所以对页面的SEO不友好，其次就是咱们源码中要有和咱们网站，内容中联系紧密的词，不能用{{代码块展示}}，因为蜘蛛是看不懂咱们写的这个代码和咱们内容有什么关系
所以说到这儿大家应该对SEO有了一定的了解了，也大概明白前端做SEO的需要注意东西。
1、和咱们内容相关的网页跳转应该用a标签（router-link，nuxt-link），而且a标签的href属性要有对应的链接!
2、让源码中显示出来咱们这个页面中的a标签!
3、不要用客户端渲染也就是咱们常规vue项目中axios方法（在客户端进行这样的操作，咱们可以理解为现场请求现场渲染，这样源码中是没有的，例如element中分页组件）!
那说了这么半天nuxt是干什么的呢，那就是nuxt就是做服务端渲染的，客户端渲染会出现我上边说的那些问题，那服务端当然会规避这些问题，vue框架针对SEO，其实有自己的解决方案，就是ssr，通俗点讲，nuxt其实就是vue的ssr，也就是服务端渲染模式，所以nuxt框架遵循的代码规则跟vue是差不多的，而且美团，todolist，gitlab等网站都在用nuxt做SEO，所以当初技术选型的时候，斌豪我们就选择了用nuxt.js，咱们组前端都是混vue圈儿的，所以分享给大家这个框架， 我觉得上手还有理解上都是很容易的，而且很容易学会。

nuxt还有如下优点：

1. 自动代码分层
2. 强大的路由功能，支持异步数据 （一会具体讲一下这个）
3. 静态文件服务
4. ES6/ES7 语法支持
5. 打包和压缩 JS 和 CSS
6. HTML头部标签管理（现成的TDK）
7. 本地开发支持热加载
8. 集成ESLint
9. 支持各种样式预处理器： SASS、LESS、 Stylus等等

二、nuxt怎么用？

那么，nuxt是做服务端渲染的 ，怎么理解nuxt呢，vue有生命周期，大家肯定很熟，nuxt也有生命周期，我给大家看一个图。

image.png

那nuxt的生命周期流程图就如上边所示，红框内的是Nuxt的生命周期(运行在服务端)，黄框内同时运行在服务端;客户端上，绿框内则运行在客户端，红框、黄框内的周期都不存在Window对象，这时候，在页面没有开始渲染的时候，在nuxt的服务端就进行了一系列的请求，拼接等操作，所以，到了客户端开始的时候，渲染速度又快，还有源码，简称“又快又有”!

image.png

结合着这个图，我大概讲一下我项目的结构

__.nuxt __ 目录是我们 nuxt build 之后生成的目录，真正运行在实际项目中的也是读取的此目录，里面生成以后就是我们在创建项目时候编译好的对应框架的node项目，我之前选择的 express ，当然喜欢 koa 的也可以选择 koa。

assets 目录官方说明是放Less、Sass、Javascript的目录，这里我一般的理解与做法是放一些需要预编译的语言，比如我会把Sass代码放到这个文件夹内。

components 目录一般是我们放自定义组件的地方，这里我把组件拆分为公共组件以及功能组件都是按目录存放到此目录下

layouts 目录这一块是比较重要的，因为此目录主要是作为nuxt的布局目录，默认里面会有一个default.vue，我们在page里面不配置layout的情况下默认会采用 layouts/default.vue 这个布局来渲染我们的页面，在这里我们可以自定义布局页面，然后在page里面去使用,只需要在自定义布局里面引用 <nuxt/> 这个组件就可以了

middleware 目录是我们存放中间件的目录
__node_modules __ 目录就是我们默认npm的依赖了,这个就不用多说了

pages 目录这个是核心目录了，所有的页面都会是来此这个文件夹里面，虽然官方也支持自定义路由，但是既然目录能够生成路由我们可以很好的利用这个来组织我们页面的层级关系；默认情况下我们的页面是会读取index.vue这个文件作为渲染页面，这里之所以没说是哪个index.vue,是因为url访问是那个层级，默认读取的就是哪个层级的index.vue文件，直接看代码和页面吧。
plugins 目录是我们存放自定义插件的地方，自定的插件可以直接在我们的vue代码里面使用，这里如果我们在创建项目的时候选择了UI框架，默认是会把UI框架的配置文件存放到这个目录，比如我这里创建之前选择了elementui，里面会包含一个element-ui.js，代码就跟我们平时用element配置一样,诸如此类的还有vant框架，项目中我实现的那个移动端图片点击放大功能就是这个框架，qr插件是分享到微博朋友圈功能，vconsole就是那个本地，测试环境下有那个调试工具，当然自己写的一些方法也可以放到这里，我和文鑫开发的时候用的比较多的一些功能，都写在了common.js里。! !16 然后通过在nuxt.config.js引入就可以了,其实跟middleware的方式大同小异，不过这里无法获取到服务端的上下文!

__static __ 目录就是存放一些静态资源的地方，比如我们网站要用到的css、图片、第三方库之类的都可以作为静态资源存放到这个目录。

__store __ 目录如果我们在创建项目之初选择了使用 vuex 的话就会存在此目录，主要是用来做 store 的，我这里因为需要夸页面，所以直接用vuex。

!16 __nuxt.config.js __ 文件可以理解为是nuxt项目的配置文件，这里可以配置的东西很多，比如我们的网站所有页面默认的标题、描述、关键词（TDK），引用全局样式、引用第三方库都可以在这里配置。还可以自己扩展编译流程，之前闹了一次乌龙，因为在源码里，最底部有好多冗余无用的代码，我加上了这段代码，解决了这个代码冗余问题，但是随之而来的就是，我把官网搞成了客户端渲染，原因也是因为这段代码，但是这段代码一直注释在这里，没有删掉的原因是，服务端请求的接口数据，在浏览器里是看不到的，不方便联调，现在一旦打开这个代码，就可以在浏览器看到接口数据了，联调起来很方便。所以一直没有删掉。随用随开，合并master的时候在关上。

接下来说明一下具体的代码块：

1、 这是nuxt的校验器

Nuxt.js 可以让你在动态路由对应的页面组件中配置一个校验方法用于校验动态路由参数的有效性。这个的执行是优于asyncData（）方法的，

如果不符合咱们规则的参数可以直接return false，这样下边的asyncData（）方法就不用执行了，就直接终止了nuxt渲染页面，直接到404页面，seo中404页面还是挺重要的，假如上边的校验器没有写校验规则，那么下边代码执行完，没有请求回来数据，那么页面很可能是一个缺失中心内容的页面，这样的页面被搜索引擎抓取到，就会认为咱们的页面是劣质页面，进而影响爬虫爬取咱们网站的频率，影响SEO。

2、asyncData（）方法

通过了上边一关之后，才能来到这个方法，这个方法就是服务端请求数据的方法，这边请求回来的数据也有说法，假如返回回来的数据是空数据，且这个接口的数据是中心内容区的数据，那这个页面即使展示出去也是缺失中心内容的页面，还是劣质页面，还是得去404页面。

拿知识详情举例子

https://www.shenlanbao.com/zhishi/2-124590

3、head（）

这个方法是SEO中做TKD（title，description，keywords）用的，每个页面的tdk可以根据内容去动态的渲染，这样在源码里才有展示，TDK也是SEO的提分指标之一，加入这个页面没有写TDK，那就会用config里默认的。

基本上可以看到，咱们vue中的一些函数，方法，这里用的很少，因为那是客户端用到的函数和方法。