服务端预渲染之Nuxt(使用篇)-创新互联

现在大多数开发都是基于 Vue 或者 React 开发的，能够达到快速开发的效果，也有一些不足的地方, Nuxt 能够在服务端做出渲染，然后让搜索引擎在爬取数据的时候能够读到当前页面。

首先要说明一点，我们可以认为我们所编写的 Vue 项目是一个服务端的项目，虽然编写的还是 Vue 项目，但是 Nuxt 是基于服务器环境的。

就简单的说一下 Nuxt 使用。基础只是还是以官方文档为主，如果博客中哪里有问题，欢迎留言指正。

说了这么多，进入正题。

路由

与传统的 Vue 项目不同的是，我们在使用 Vue 的时候需要配置 Vue-Router 信息，在 Nuxt 有很关键的一点就是 约定优于配置 。 page 目录下的所有 *.vue 文件会自动生成路由配置。

在项目初始化之后，在 pages 下面默认有一个 index.vue 文件，所以当我们使用 npm run dev 启动项目，并且使用 http://localhost:3000/ 访问的时候能够正常访问路由。

为了证实上面这一点，在 pages 下面创建一个信息 about.vue 文件，并且 http://localhost:3000/about 去访问刚刚写的页面。我们可以按照正常的 Vue 页面去开发就好了。

page目录

├─page
│ ├─index.vue
└───└─about.vue