初探 SSR 之 Nuxt

原文地址

曾今据说过 SSR 作搜索引擎优化（ SEO )，那时候的我只知道有这个东西并不了解。如今由于工做须要入门学习了 Nuxt ，刚刚开始我还觉得很难，学完以后发现他比我 想象中的简单多了。粗略看一遍文档，敲一遍文档的案例，在再网上找了一个小小的项目练练手。好像就已经学的差很少了，希望等工做须要的时候我能够快速上手，用着毫无压力吧。

在学习过程当中参考的资料有：文档 Nuxt.js 和 合格前端系列第十一弹-初探 Nuxt.js 秘密花园里面的 Demo 小项目。阅读文档不仔细，闹过一次笑话。

Nuxt 目录结构

建立一个 nuxt 很简单，我假设你已经不是刚刚入门前端的小伙伴了

$ npx create-nuxt-app <项目名>
复制代码

建立好项目之后，会获得入流程图所示的项目结构

初始化获得的这个项目目录结构基本不须要咱们在作什么改变，咱们只要在对应的目录底下作编写对应的代码就行了。 nuxt 搭建的项目和用 vue cli 搭建的项目有些不同的事，不须要咱们手动去设置路由。全部的路由都是 nuxt 帮咱们设置好的。 优势就是，不再用担忧我绞破脑汁想路由名字了；下面会详细介绍，没有介绍到的目录或者文件，都在流程图里面详细介绍了，大部分的配置和 vue cli 配置大同小异 。

页面布局

关于页面要如何进行布局，咱们一般把它放在 layouts 目录底下 default.vue 文件里面（默认布局） 例如 default.vue 代码如图所示

<template>
  <div>
    <v-header></v-header>
    <main ref="container" class="content-container">
      <nuxt />
    </main>
  </div>
</template>
复制代码

那么全部页面都将引入一个 v-header 组件，全部 pages 目录底下页面代码都将放入到 main 标签里面（前提是你没有使用自定义布局） 关于自定义布局请转接到文档

页面

Nuxt.js 为页面提供的特殊配置项，咱们在页面中能够直接这些方法和属性

在 asyncData 方法里面第一个参数就是当前页面组件的上下文的对象

由于其余方法里面也有上下文这个东西详细介绍一下，关于其余方法和属性详细信息请参考 api

路由信息

基本路由

假设 pages 的目录结构以下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue
复制代码

那么，Nuxt.js 自动生成的路由配置以下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

复制代码

动态路由

带参数的动态路由，须要建立对应的如下划线做为前缀的 Vue 文件 或 目录。

假设 pages 的目录结构以下：

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue
复制代码

Nuxt.js 生成对应的路由配置表为：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
    {
      name: 'slug',
      path: '/:slug',
      component: 'pages/_slug/index.vue'
    },
    {
      name: 'slug-comments',
      path: '/:slug/comments',
      component: 'pages/_slug/comments.vue'
    }
  ]
}
复制代码

你会发现名称为 users-id 的路由路径带有 :id? 参数，表示该路由是可选的。若是你想将它设置为必选的路由，须要在 users/_id 目录内建立一个 index.vue 文件。

更多路由信息请参考参考文档

Nuxt api

最重要的是咱们要了解他的生命周期，这样才能够更好的使用他

进入DEMO

真枪实弹作一次，体会更加深入，不能纸上谈兵。 负责搬砖个人，搬了一个仿掘金的 Demo 项目，项目彻底参考合格前端系列第十一弹-初探 Nuxt.js 秘密花园