初探nuxt.js 总结一下

首先介绍下nuxt.js

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

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

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

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

除此之外，我们还提供了一种命令叫：nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能，是向开发集成各种微服务（microservices）的 Web 应用迈开的新一步。

作为框架，Nuxt.js 为客户端/服务端这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

这是官网的话，对于我们来说就是简单来说，Nuxt就是基于Vue的一个应用框架，采用服务端渲染，让你的SPA应用(Vue)也可以拥有SEO。

下面就来创建我们第一个nuxt工程

npx create-nuxt-app <项目名>

注意

选择你想要的Nuxt模式 (Universal or SPA)
先给出推荐选项： Universal
推荐理由：
可以这样武断的说，用nuxt的人多半是为了解决SEO的问题，而Universal 和 Spa 的区别也恰好就在于对seo的实现存在差异。

在我基于nuxt搭建的个人博客中，我用了谷歌的免费xml工具自动生成网站地图，也就是sitemap.xml文件。如下：

项目选择Spa模式时：

项目选择Universal 模式时：

看出区别了吧，spa是单页，所以只有一个入口文件，sitemap也就只有一个url，这会导致网站辛辛苦苦搭建的服务端渲染最多只被搜索引擎收录一个页面。

而Universal则能实现所有网站路径完全被收录，这才是最初我们使用nuxt的初衷。

附：

sitemap.xml 网站地图，主要作用是告知搜索引擎站点中存在的链接，引导抓取收录。一般放在站点根目录即可（也有办法主动推送给网络爬虫，这里不展开讲）。主要包含信息是链接、最后修改时间、优先级。

谷歌免费xml生成工具 https://www.xml-sitemaps.com 需要FQ，要有梯子才行。

我选择就是Universal

目录生成好了就是这些

这里介绍干啥用的。今天就说到这里