初探 SSR 之 Nuxt

時間 2019-11-08

標籤初探 ssr nuxt 简体版

原文原文鏈接

曾今據說過 SSR 作搜索引擎優化（ SEO )，那時候的我只知道有這個東西並不瞭解。如今由於工做須要入門學習了 Nuxt ，剛剛開始我還覺得很難，學完以後發現他比我想象中的簡單多了。粗略看一遍文檔，敲一遍文檔的案例，在再網上找了一個小小的項目練練手。好像就已經學的差很少了，希望等工做須要的時候我能夠快速上手，用着毫無壓力吧。vue

在學習過程當中參考的資料有：文檔 Nuxt.js 和合格前端系列第十一彈-初探 Nuxt.js 祕密花園裏面的 Demo 小項目。閱讀文檔不仔細，鬧過一次笑話。git

`Nuxt` 目錄結構

建立一個 nuxt 很簡單，我假設你已經不是剛剛入門前端的小夥伴了github

$ npx create-nuxt-app <項目名>
複製代碼

建立好項目之後，會獲得入流程圖所示的項目結構api

初始化獲得的這個項目目錄結構基本不須要咱們在作什麼改變，咱們只要在對應的目錄底下作編寫對應的代碼就行了。 nuxt 搭建的項目和用 vue cli 搭建的項目有些不同的事，不須要咱們手動去設置路由。全部的路由都是 nuxt 幫咱們設置好的。優勢就是，不再用擔憂我絞破腦汁想路由名字了；下面會詳細介紹，沒有介紹到的目錄或者文件，都在流程圖裏面詳細介紹了，大部分的配置和 vue cli 配置大同小異。bash

頁面佈局

關於頁面要如何進行佈局，咱們一般把它放在 layouts 目錄底下 default.vue 文件裏面（默認佈局）例如 default.vue 代碼如圖所示app

<template>
  <div>
    <v-header></v-header>
    <main ref="container" class="content-container">
      <nuxt />
    </main>
  </div>
</template>
複製代碼

那麼全部頁面都將引入一個 v-header 組件，全部 pages 目錄底下頁面代碼都將放入到 main 標籤裏面（前提是你沒有使用自定義佈局）關於自定義佈局請轉接到文檔async

頁面

Nuxt.js 爲頁面提供的特殊配置項，咱們在頁面中能夠直接這些方法和屬性ide

在 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'
    }
  ]
}
複製代碼