Nuxt.js（開啟SSR渲染）

阿新 • • 發佈：2018-08-01

orm 基本 round 標識 iss 啟動服務 all filter lin

為什麽要用Nuxt？

　　1.SEO

　　我們需要搜索引擎更多地抓取到我們的內容，更詳細地認識到我們的網頁結構，而不是僅對首頁或特定靜態頁進行索引.再直白點說，就是Vue.js原來是開發SPA（單頁應用）的，但是隨著技術的普及，很多人想用Vue開發多頁應用，並在服務端完成渲染。這時候就出現了Nuxt.js這個框架，她簡化了SSR的開發難度。還可以直接用命令把我們制作的vue項目生成為靜態html.

　　 Nuxt.js適合作新聞、博客、電影、咨詢這樣的需要搜索引擎提供流量的項目。如果你要作移動端的項目，就沒必要使用這個框架了.

什麽是SSR？

SSR，即服務器渲染，就是在服務器端將對Vue頁面進行渲染生成html文件，將html頁面傳遞給瀏覽器。

Nuxt.js的官方網站是這樣介紹的：

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

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

Nuxt.js是特點（優點）：

基於 Vue.js

自動代碼分層

服務端渲染

強大的路由功能，支持異步數據

靜態文件服務 ES6/ES7 語法支持

打包和壓縮 JS 和 CSS HTML頭部標簽管理

本地開發支持熱加載

集成ESLint

支持各種樣式預處理器： SASS、LESS、 Stylus等等

Nuxt環境搭建和Hello World

1.用npm來安裝vue-cli這個框架，如果你已經安裝過了，可以省略這步。

npm install vue-cli -g

2.使用vue安裝 nuxt

vue init nuxt/starter

3.使用npm install安裝依賴包

npm install

4.使用npm run dev 啟動服務

npm run dev

5.在瀏覽器輸入 localhost:3000,可以看到結果。

技術分享圖片

可以看到項目目錄結構也發生了變化。

目錄結構：

技術分享圖片

Nuxt常用配置項

配置IP和端口：

開發中經常會遇到端口被占用或者指定IP的情況。我們需要在根目錄下的package.json裏對config項進行配置。比如現在我們想把IP配置成127.0.0.1，端口設置1818。

/package.json

 "config":{
    "nuxt":{
      "host":"127.0.0.1",
      "port":"1818"
    }
  },

配置好後，我們在終端中輸入npm run dev，然後你會看到服務地址改為了127.0.0.1:1818.

配置全局CSS

在開發多頁項目時，都會定義一個全局的CSS來初始化我們的頁面渲染，比如把padding和margin設置成0，網上也有非常出名的開源css文件normailze.css。要定義這些配置，需要在nuxt.config.js裏進行操作。

比如現在我們要把頁面字體設置為紅色，就可以在assets/css/normailze.css文件，然後把字體設置為紅色。

/assets/css/normailze.css

html{
    color:red;
}

/nuxt.config.js

css:[‘~assets/css/normailze.css‘],

設置好後，在終端輸入npm run dev 。然後你會發現字體已經變成了紅色。

配置webpack的loader

在nuxt.config.js裏是可以對webpack的基本配置進行覆蓋的，比如現在我們要配置一個url-loader來進行小圖片的64位打包。就可以在nuxt.config.js的build選項裏進行配置。

build: {
 
    loaders:[
      {
        test:/\.(png|jpe?g|gif|svg)$/,
        loader:"url-loader",
        query:{
          limit:10000,
          name:‘img/[name].[hash].[ext]‘
        }
      }
    ],
 
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: ‘pre‘,
          test: /\.(js|vue)$/,
          loader: ‘eslint-loader‘,
          exclude: /(node_modules)/
        })
      }
    }
  }

Nuxt的路由配置和參數傳遞

在根目錄的pages文件下about.vue文件

<template>
  <div>
      <h2>About Index page</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

在根目錄的pages文件下news.vue文件

<template>
  <div>
      <h2>News Index page</h2>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

修改原來的pages文件夾下的index.vue

<template>
  <div>
    <ul>
      <li><a href="/">HOME</a></li>
      <li><a href="/about">ABOUT</a></li>
      <li><a href="/news">NEWS</a></li>
    </ul>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>

<nuxt-link>標簽以及 params傳遞參數

修改pages下的Index.vue文件，給新聞的跳轉加上params參數，傳遞3306ID。

<template>
  <div>
    <ul>
      <li><nuxt-link :to="{name:‘index‘}">HOME</nuxt-link></li>
      <li><nuxt-link :to="{name:‘about‘}">ABOUT</nuxt-link></li>
      <li><nuxt-link :to="{name:‘news‘,params:{newsId:3306}}">NEWS</nuxt-link></li>
    </ul>
  </div>
</template>
 
<script>
 
export default {
  components: {
   
  }
}
</script>
 
<style>
 
</style>

在news.vue裏用$route.params.newsId進行接收，代碼如下

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

Nuxt的動態路由和參數校驗

新建_id.vue的文件 /pages/_id.vue

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>

在/pages/news.vue進行修改，增加兩個詳細頁的路由News-1和News-2

<template>
  <div>
      <h2>News Index page</h2>
      <p>NewsID:{{$route.params.newsId}}</p>
       <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/123">News-1</a></li>
        <li><a href="/456">News-2</a></li>
      </ul>
  </div>
</template>

進入一個頁面，對參數傳遞的正確性校驗是必須的，Nuxt.js也貼心的為我們準備了校驗方法validate( )

/pages/_id.vue

export default {
 
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  }
 
}

Nuxt的路由動畫效果

全局路由動畫

/assets/css/main.css

.page-enter-active, .page-leave-active {
    transition: opacity 2s;
}
.page-enter, .page-leave-active {
    opacity: 0;
}

然後在nuxt.config.js裏加入一個全局的css文件就可以了。

 css:[‘assets/css/main.css‘],

這時候在頁面切換的時候就會有2秒鐘的動畫切換效果了，但是你會發現一些頁面是沒有效果的，這是因為你沒有是<nuxt-link>組件來制作跳轉鏈接。你需要進行更改。

單獨設置頁面動效

在全局樣式assets/main.css 中添加以下內容。

.test-enter-active, .test-leave-active {
    transition: all 2s;
    font-size:12px;
    
}
.test-enter, .test-leave-active {
    opacity: 0;
    font-size:40px;
}

然後在about.vue組件中設置

export default {
  transition:‘test‘
}

Nuxt的錯誤頁面和個性meta設置

建立錯誤頁面

在根目錄下的layouts文件夾下建立一個error.vue文件，它相當於一個顯示應用錯誤的組件。

<template>
  <div>
      <h2 v-if="error.statusCode==404">404頁面不存在</h2>
      <h2 v-else>500服務器錯誤</h2>
      <ul>
          <li><nuxt-link to="/">HOME</nuxt-link></li>
      </ul>
  </div>
</template>
 
<script>
export default {
  props:[‘error‘],
}
</script>

代碼用v-if進行判斷錯誤類型，需要註意的是這個錯誤是你需要在<script>裏進行聲明的，如果不聲明程序是找不到error.statusCode的。

這裏用了一個<nuxt-link>的簡單寫法直接跟上路徑就可以了。

個性meta設置

頁面的Meta對於SEO的設置非常重要，比如你現在要作個新聞頁面，那為了搜索引擎對新聞的收錄，需要每個頁面對新聞都有不同的title和meta設置。直接使用head方法來設置當前頁面的頭部信息就可以了。我們現在要把New-1這個頁面設置成個性的meta和title。

1.我們先把pages/news.vue頁面的鏈接進行修改一下，傳入一個title，目的是為了在新聞具體頁面進行接收title，形成文章的標題。

/pages/news.vue

<li><nuxt-link :to="{name:‘news-id‘,params:{id:123,title:‘測試.com‘}}">News-1</nuxt-link></li>

2.第一步完成後，我們修改/pages/_id.vue，讓它根據傳遞值變成獨特的meta和title標簽。

<template>
  <div>
      <h2>News-Content [{{$route.params.id}}]</h2>
      <ul>
        <li><a href="/">Home</a></li>
      </ul>
  </div>
</template>
<script>
export default {
 
  validate ({ params }) {
    // Must be a number
    return /^\d+$/.test(params.id)
  },
  data(){
    return{
      title:this.$route.params.title,
    }
  },
//獨立設置head信息
  head(){
      return{
        title:this.title,
        meta:[
          {hid:‘description‘,name:‘news‘,content:‘This is news page‘}
        ]
      }
    }
}
  
</script>

註意：為了避免子組件中的meta標簽不能正確覆蓋父組件中相同的標簽而產生重復的現象，建議利用 hid 鍵為meta標簽配一個唯一的標識編號。

asyncData方法獲取數據

創建遠程數據

在這裏制作一些假的遠程數據，我選擇的網站是myjson.com，它是一個json的簡單倉庫，學習使用是非常適合的。
我們打開網站，在對話空中輸入JSON代碼，這個代碼可以自己隨意輸入哦。

{
  "name": "JSon",
  "age": 28,
  "interest": "hello!"
}

輸入後，網站會給你一個地址，這就是你這個JSON倉庫的地址了。

https://api.myjson.com/bins/w043s

安裝Axios

Vue.js官方推薦使用的遠程數據獲取方式就Axios，所以我們安裝官方推薦，來使用Axios。這裏我們使用npm 來安裝 axios。
直接在終端中輸入下面的命令：

npm install axios --save

ansycData的promise方法

我們在pages下面新建一個文件，叫做ansyData.vue。
然後寫入下面的代碼：

<template>
  <div>
      <h1>姓名：{{info.name}}</h1>
      <h2>年齡：{{info.age}}</h2>
      <h2>興趣：{{info.interest}}</h2>
  </div>
</template>
<script>
import axios from ‘axios‘
export default {
  data(){
     return {
         name:‘hello World‘,
     }
  },
  asyncData(){
      return axios.get(‘https://api.myjson.com/bins/w043s‘)
      .then((res)=>{
          console.log(res)
          return {info:res.data}
      })
      
  }
}
</script>

這時候我們可以看到，瀏覽器中已經能輸出結果了。

ansycData的await方法

當然上面的方法稍顯過時，現在都在用ansyc…await來解決異步,改寫上面的代碼。

<template>
  <div>
      <h1>姓名：{{info.name}}</h1>
      <h2>年齡：{{info.age}}</h2>
      <h2>興趣：{{info.interest}}</h2>
 
     
  </div>
</template>
<script>
import axios from ‘axios‘
export default {
  data(){
     return {
         name:‘hello World‘,
     }
  },
  async asyncData(){
      let {data}=await axios.get(‘https://api.myjson.com/bins/w043s‘)
      return {info: data}
      
  }
}
</script>

靜態資源和打包

Nuxt.js項目中如何放置靜態資源和打包

直接引入圖片

我們在網上任意下載一個圖片，放到項目中的static文件夾下面，然後可以使用下面的引入方法進行引用

<div><img src="~static/text.png" /></div>

這種引用方法是不用估計相對路徑的，“~”就相當於定位到了項目跟目錄，這時候你的圖片路徑就不會出現錯誤，就算打包也是正常的。

CSS引入圖片

如果在CSS中引入圖片，方法和html中直接引入是一樣的，也是用“~”符號引入。

<style>
  .diss{
    width: 300px;
    height: 100px;
    background-image: url(‘~static/text.png‘)
  }
</style>

這時候在npm run dev 下是完全正常的，那我們看一下打包。

打包靜態HTML並運行

用Nuxt.js制作完成後，你可以打包成靜態文件並放在服務器上，進行運行。

在終端中輸入：

npm run generate

會生成一個dist文件夾，裏邊就是生產的靜態html文件，直接放到服務器端進行運行了。

文章來源：http://jspang.com/2018/02/26/nuxt.js/

Nuxt.js（開啟SSR渲染）

orm 基本 round 標識 iss 啟動服務 all filter lin 為什麽要用Nuxt？　　1.SEO 　　我們需要搜索引擎更多地抓取到我們的內容，更詳細地認識到我們的網頁結構，而不是僅對首頁或特定靜態頁進行索引.再直白點說，就是Vue.js原來是開發SPA

Nuxt.js（開啟SSR渲染）

什麽是SSR？

Nuxt.js是特點（優點）：

Nuxt環境搭建和Hello World

目錄結構：

Nuxt常用配置項

配置IP和端口：

配置全局CSS

Nuxt的路由配置和參數傳遞

Nuxt的動態路由和參數校驗

Nuxt的路由動畫效果

全局路由動畫

單獨設置頁面動效

Nuxt的錯誤頁面和個性meta設置

建立錯誤頁面

個性meta設置

asyncData方法獲取數據

創建遠程數據

安裝Axios

ansycData的promise方法

ansycData的await方法

靜態資源和打包

直接引入圖片

CSS引入圖片

打包靜態HTML並運行

相關推薦