Nuxt.js

Nuxt.js介紹

移動互聯網的興起促進了web前後端分離開發模式的發展，服務端只專注業務，前端只專注用戶體驗，前端大量運
用的前端渲染技術，比如流行的vue.js、react框架都實現了功能強大的前端渲染。
但是，對於有SEO需求的網頁如果使用前端渲染技術去開發就不利於SEO了，有沒有一種即使用vue.js、react的前
端技術也實現服務端渲染的技術呢？其實，對於服務端渲染的需求，vue.js、react這樣流行的前端框架提供了服務
端渲染的解決方案。
https://zh.nuxtjs.org/guide/

Nuxt.js 工作原理

下圖展示了從客戶端請求到Nuxt.js進行服務端渲染的整體的工作流程：

1、用戶打開瀏覽器，輸入網址請求到Node.js
2、部署在Node.js的應用Nuxt.js接收瀏覽器請求，並請求服務端獲取數據
3、Nuxt.js獲取到數據後進行服務端渲染
4、Nuxt.js將html網頁響應給瀏覽器

Nuxt.js 基本使用

1. 創建Nuxt工程

nuxt.js有標準的目錄結構，官方提供了模板工程，可以模板工程快速創建nuxt項目。
模板工程地址：https://github.com/nuxt-community/starter-template/archive/master.zip

2.目錄結構

‐ 資源目錄
資源目錄 assets 用於組織未編譯的靜態資源如 LESS、SASS 或 JavaScript。
‐ 組件目錄
組件目錄 components 用於組織應用的 Vue.js 組件。Nuxt.js 不會擴展增強該目錄下 Vue.js 組件，即這些組件不
會像頁面組件那樣有 asyncData 方法的特性。
‐ 佈局目錄
佈局目錄 layouts 用於組織應用的佈局組件。
該目錄名爲Nuxt.js保留的，不可更改。
‐ 中間件目錄
middleware 目錄用於存放應用的中間件。
‐ 頁面目錄
頁面目錄 pages 用於組織應用的路由及視圖。Nuxt.js 框架讀取該目錄下所有的 .vue 文件並自動生成對應的路由配
置。
該目錄名爲Nuxt.js保留的，不可更改。
‐ 插件目錄
插件目錄 plugins 用於組織那些需要在 根vue.js應用 實例化之前需要運行的 Javascript 插件。
‐ 靜態文件目錄
靜態文件目錄 static 用於存放應用的靜態文件，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務
器啓動的時候，該目錄下的文件會映射至應用的根路徑 / 下。
舉個例子: /static/logo.png 映射至 /logo.png
該目錄名爲Nuxt.js保留的，不可更改。
‐ Store 目錄
store 目錄用於組織應用的 Vuex 狀態樹 文件。 Nuxt.js 框架集成了 Vuex 狀態樹 的相關功能配置，在 store 目
錄下創建一個 index.js 文件可激活這些配置。
該目錄名爲Nuxt.js保留的，不可更改。
‐ nuxt.config.js 文件
nuxt.config.js 文件用於組織Nuxt.js 應用的個性化配置，以便覆蓋默認配置。
該文件名爲Nuxt.js保留的，不可更改。
‐ package.json 文件
package.json 文件用於描述應用的依賴關係和對外暴露的腳本接口。
該文件名爲Nuxt.js保留的，不可更改。
nuxt.js 提供了目錄的別名，方便在程序中引用：

3.頁面佈局

頁面佈局就是頁面內容的整體結構，通過在layouts目錄下添加布局文件來實現。在layouts 根目錄下的所有文件都
屬於個性化佈局文件，可以在頁面組件中利用 layout 屬性來引用。
例:
定義：layouts/test.vue佈局文件，如下：
注意：佈局文件中一定要加 組件用於顯示頁面內容。

<template>
  <div>
    <div>這裏是頭</div>
    <nuxt/>
    <div>這裏是尾</div>
  </div>
</template>
<script>
  export default {

  }
</script>
<style>

</style>

在pages目錄創建user目錄，並創建index.vue頁面
在 pages/user/index.vue 頁面裏， 可以指定頁面組件使用 test 佈局，代碼如下：

<template>
    <div>
    測試頁面
    </div>
</template>
<script>
  export default{
    layout:'test'
  }
</script>
<style>
</style>

測試，請求：http://localhost:10000/user，如果如下:

4.路由

基礎路由
Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。
index.vue 代碼如下：

<template>
  <div>
    用戶管理首頁
  </div>
</template>
<script>
export default{
   layout:"test"
}
</script>
<style>
</style>

one.vue代碼如下：

<template>
  <div>
    one頁面
  </div>
</template>
<script>
export default{
   layout:"test"
}
</script>
<style>
</style>

分別訪問如下鏈接進行測試：
http://localhost:10000/user
http://localhost:10000/user/one
嵌套路由
你可以通過 vue-router 的子路由創建 Nuxt.js 應用的嵌套路由。
創建內嵌子路由，你需要添加一個 Vue 文件，同時添加一個與該文件同名的目錄用來存放子視圖組件。
別忘了在父級 Vue 文件內增加 <nuxt -child/> 用於顯示子視圖內容。
將user.vue文件創建到與user目錄的父目錄下，即和user目錄保持平級。

<template>
  <div>
    用戶管理導航，<nuxt‐link :to="'/user/101'">修改</nuxt‐link>
    <nuxt‐child/>
  </div>
</template>
<script>
  export default{
    layout:"test"
  }
</script>
<style>
</style>

_id.vue頁面實現了向頁面傳入id參數，頁面內容如下：

<template>
  <div>
     修改用戶信息{{id}}
  </div>
</template>
<script>
  export default{
    layout:"test",
    data(){
        return {
            id:''
        }
    },
    mounted(){
      this.id = this.$route.params.id;
      console.log(this.id)
    }
  }
</script>
<style>
</style>

測試：http://localhost:10000/user

5.獲取數據