7、服務端渲染 ---kkb

單頁應用的問題：

一、首屏渲染等待時間長：必須得等js加載完畢，而且執行完畢，才能渲染出首屏

二、seo不友好：爬蟲只能拿到一個div，認爲頁面是空的，不利於seo（公司的宣傳頁會比較在意seo）

 

SSR

爲了解決這兩個問題，出現了SSR解決方案，後端渲染出完整的首屏dom結構返回，前端拿到的內容帶上首屏，後續的頁面操做，再用單頁的路由跳轉和渲染，稱之爲服務端渲染（server side render）

 

弊端：

一、學習難度較高

二、第三方庫有時候會有問題

三、增長服務器壓力

 

nuxt.js

Nuxt.js 是一個基於 Vue.js 的通用應用框架

經過對客戶端/服務器基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染

 

結論：

• nuxt不單單用於服務端渲染，也可用於 spa 應用開發
• 利用 nuxt 提供的基礎項目結構、路由生成、中間件、插件等特性可大幅度提升開發效率
• nuxt 可用於網站靜態化

 

nuxt.js 特性

• 基於 Vue.js
• 自動代碼分層
• 服務端渲染
• 強大的路由功能，支持異步數據
• 靜態文件服務
• ES6/ES7語法支持
• 打包和壓縮JS和CSS
• HTML頭部標籤管理
• 本地開發支持熱加載
• 集成ESLint
• 支持各類樣式預處理器：SASS、LESS、Stylus
• 支持HTTP/2 推送

 

nuxt渲染流程：

 

 

nuxt安裝

npx create-nuxt-app <項目名>

選擇服務器：Koa

運行項目：npm run dev

 

路由

pages目錄中全部 *.vue 文件自動生成應用的路由配置，新建：

pages/admin.vue  商品管理頁

pages/login.vue    登陸頁

若是想查看路由內容，能夠去：  .nuxt/router.js  文件中查看

 

導航

添加路由導航：layouts/default.vue

<div>
  <nav>
    <!-- 別名：n-link，NLink，NuxtLink -->
    <nuxt-link to="/">首頁</nuxt-link>
    <nuxt-link to="/admin" no-prefetch>管理</nuxt-link>
    <nuxt-link to="/cart">購物車</nuxt-link>
  </nav>
  <!-- 頁面內容佔位符 -->
  <nuxt />
</div>

路由默認採用預加載頁面的方式，若是想使用懶加載的話，能夠加上 no-prefetch

 

動態路由

如下劃線做爲前綴的 .vue 文件或目錄，會被定義爲動態路由

 

 

// index.vue
<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="good in goods" :key="good.id">
        <nuxt-link :to="`/detail/${good.id}`">{{ good.text }}</nuxt-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      goods:[
        { id: 1, text: 'Web全棧架構師', price: 8999 },
        { id: 2, text: '架構師', price: 19999 }
      ]
    }
  }
}
</script>

// _id.vue
<template>
  <div>
    <h2>商品詳情</h2>
    <p>{{$route.params.id}}</p>
  </div>
</template>

 

嵌套路由

建立內嵌子路由，你須要添加一個.vue文件，同時添加一個與該文件同名的目錄來存放子視圖組件

文件結構以下

 

 

detail/_id.vue 文件

<div>
  <p>{{$route.params.id}}</p>
</div>

detail.vue文件

<div>
  <h2>商品詳情</h2>
  <!-- 路由出口 -->
  <nuxt-child />
</div>

 

nuxt-child 等效於 router-view

 

自定義佈局

建立空白布局頁面 layouts/blank.vue，用於login.vue

blank.vue 文件

<template>
  <div>
    <nuxt/>
  </div>
</template>

頁面 pages/login.vue 使用自定義佈局

export default {
  layout: 'blank'
}

 

自定義錯誤頁面

建立 layouts/error.vue

<template>
  <div>
    <h1 v-if="error.statusCode === 404">頁面不存在</h1>
    <h1 v-else>應用發生異常</h1>
    <p>{{error}}</p>
    <nuxt-link to="/">首頁</nuxt-link>
  </div>
</template>
<script>
export default {
  props: ['error'],
  layout: 'blank'
}
</script>

 

頁面

頁面組件就是Vue組件，只不過 Nuxt.js 爲這些組件添加了一些特殊的配置項

給首頁添加標題和meta，index.vue

export default {
  head(){
    return{
      title: '課程列表',
      meta: [{name: 'description', hid: 'description', content: 'page meta'}],
      link: [{rel: 'favicon', href: 'favicon.icon'}]
    }
  }
}