Nuxt.js 简介

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

我们的目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

什么是SPA

SPA（single page web application）单页 Web 应用，Web 不再是一张张页面，而是一个整体的应用，一个由路由系统、数据系统、页面（组件）系统等等，组成的应用程序。

我们之前学习的Vue就是SPA中的佼佼者。

SPA 应用广泛用于对SEO要求不高的场景中

SEO解决方案：提前将页面和数据进行整合

捕获.PNG

通过了解各类搜索引擎如何抓取互联网页面、如何进行索引以及如何确定其对某一特定关键词的搜索结果排名等技术，来对网页内容进行相关的优化，使其符合用户浏览习惯，在不损害用户体验的情况下提高搜索引擎排名，从而提高网站访问量，最终提升的销售能力或宣传能力的技术。

SEO：搜索引擎优化（Search Engine Optimization）, 通过各种技术（手段）来确保，我们的Web内容被搜索引擎最大化收录，最大化提高权重，最终带来更多流量。
非常明显，SPA程序不利于SEO

SEO解决方案：提前将页面和数据进行整合

什么是SSR技术服务端渲染（Server Side Render），即：网页是通过服务端渲染生成后输出给客户端。

在SSR中，前端分成2部分：前端客户端、前端服务端前端服务端，用于发送ajax，获得数据前端客户端，用于将ajax数据和页面进行渲染，渲染成html页面，并响应给调用程序（浏览器、爬虫）

如果爬虫获得html页面，就可以启动处理程序，处理页面内容，最终完成SEO操作。

SPA单页应用程序

SSR服务器端渲染

优势

1.页面内容在客户端渲染 2. 只关注View层，与后台耦合度低，前后端分离 3.减轻后台渲染画面的压力

1.更好的SEO，搜索引擎工具可以直接查看完全渲染的画面 2.更快的内容到达时间 (time-to-content)，用户能更快的看到完整渲染的画面

劣势

1.首屏加载缓慢 2.SEO(搜索引擎优化)不友好

1.更多的服务器端负载 2.涉及构建设置和部署的更多要求，需要用Node.js渲染 3.开发条件有限制，一些生命周期将失效 4.一些常用的浏览器API无法使用

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

Nuxt支持vue的所有功能，此类内容为前端客户端内容。 Nuxt特有的内容，都是前端服务端内容。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。

（1）安装NodeJS

　　这里不做讲解了，只要npm的版本不低于5.2.0版本即可。
（2）registry配置

　　若公司内网提供了类似的制品库地址，那么就可以将registry的值设置为公司内网具体的地址；若是采用中国互联网的话，那么最好将registry的值设置为淘宝NPM镜像，即registry.npm.taobao.org。我们可以直接在.npmrc文件中添加registry=https://registry.n…

npm config set registry registry.npm.taobao.org

　　（3）安装create-nuxt-app脚手架

　　在cmd窗口中输入npm i -g create-nuxt-app命令，按下回车键即可，静等安装过程，最终的效果如下图所示：

捕获1饿2.PNG