对于React和Vue构建的单页应用程序，SEO是一个众所周知的问题。目前，SSR-服务器端渲染是最好的解决方案。React应用有Next.js，对应Vue的解决方案是Nuxt.js.

1.介绍

官方网站：https://nuxtjs.org/

https://github.com/nuxt/nuxt.js

什么是Nuxt.js？

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

通过客户端/服务器基础设施的抽象组织，Nuxt.js主要关注应用程序的UI渲染。

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

Nuxt.js预先假定了使用Vue.js开发服务器呈现的应用程序所需的各种配置

此外，我们还提供了一个名为nuxt generate的命令，它提供了基于Vue.js为应用程序生成相应静态站点的功能

我们相信这个命令提供的功能是开发集成各种微服务的Web应用程序的新步骤。

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

2.构建第一个Nuxt.js项目

建议使用Nuxt提供的模板。假设您已经安装了vue-cli，如果没有，请执行npm install vue-cli -g来安装vue-cli。

$ vue nit nuxt-community/starter-template project-name进入项目文件夹以安装依赖包。

Cd项目-名称npm安装启动项目。

打开浏览器，访问http://localhost:3000。您可以看到下一页呈现的页面。

3.添加页面

新创建的项目结构如下图所示：

项目结构

Nuxt规定所有页面都放在pages文件夹下，Nuxt会根据目录结构自动生成相应的路由。

现在在pages下创建一个新的Vue文件test.vue，并访问http://localhost:3000/test查看新添加的页面。

4.引入第三方插件

通常我们需要引入第三方插件，比如前端组件、日志等等。当然，第一步是安装插件，以element-UI为例。

虽然npm install element-ui已经下载了element-ui的包，但是不能像普通项目一样直接导入并在Vue实例中使用。Nuxt的内核项目都在。nuxt目录，如果下面的文件被修改，它将不会生效。直接修改项目文件是无效的，因为文件会在每次编译时重新生成。

核心项目结构

虽然不能直接修改，但Nuxt提供了引入第三方插件的特殊方式。

第一步是在pulgin文件夹下创建一个新的js文件元素-ui.js。文件内容如下。

从' vue '导入vue从' element-ui '导入' element-ui/lib/theme-粉笔/index.css' vue.use (element)步骤2，修改nuxt.config.js Add plugins属性。

/* * *包含第三方插件*/plugins :[' ~ plugins/element-ui ']//element-ui . js文件地址重新编译后，Nuxt会编译第三方插件并使用。此时，第三方插件可以在任何Vue文件中使用。

5.静态资源文件

您可以将静态资源文件放在静态文件夹中，然后使用文件名http://localhost33603000/访问静态资源文件。

Nuxt还提供了许多功能，例如动态路由和ESLint代码检测。这是今天首先要介绍的地方。其他深度用餐请参考官网。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。