第一節(jié)：nuxt.js相關(guān)概述

nuxt.js簡單的說是Vue.js的通用框架，最常用的就是用來作SSR（服務(wù)器端渲染）.Vue.js是開發(fā)SPA（單頁應(yīng)用）的,Nuxt.js這個框架，用Vue開發(fā)多頁應(yīng)用，并在服務(wù)端完成渲染，可以直接用命令把我們制作的vue項目生成為靜態(tài)html。

1.那服務(wù)器端渲染到底有什么好處呢？

主要的原因時SPA（單頁應(yīng)用）不利于搜索引擎的SEO操作，Nuxt.js適合作新聞、博客、電影、咨詢這樣的需要搜索引擎提供流量的項目。如果你要作移動端的項目，就沒必要使用這個框架了。

2.什么是SSR？

SSR，即服務(wù)器渲染，就是在服務(wù)器端將對Vue頁面進行渲染生成html文件，將html頁面?zhèn)鬟f給瀏覽器。

SSR兩個優(yōu)點：

(1)SEO 不同于SPA的HTML只有一個無實際內(nèi)容的HTML和一個app.js，SSR生成的HTML是有內(nèi)容的，這讓搜索引擎能夠索引到頁面內(nèi)容。

(2)更快內(nèi)容到達時間 傳統(tǒng)的SPA應(yīng)用是將bundle.js從服務(wù)器獲取，然后在客戶端解析并掛載到dom。而SSR直接將HTML字符串傳遞給瀏覽器。大大加快了首屏加載時間。

Nuxt.js的官方網(wǎng)站是這樣介紹的：

Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。 通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。

Nuxt.js是特點（優(yōu)點）：

•基于 Vue.js
•自動代碼分層
•服務(wù)端渲染
•強大的路由功能，支持異步數(shù)據(jù)
•靜態(tài)文件服務(wù)
•ES6/ES7 語法支持
•打包和壓縮 JS 和 CSS
•HTML頭部標簽管理
•本地開發(fā)支持熱加載
•集成ESLint
•支持各種樣式預(yù)處理器： SASS、LESS、 Stylus等等

第二節(jié)：Nuxt環(huán)境搭建

1.nuxt.js安裝

在使用npm前你需要安裝Node到系統(tǒng)中。

（1）用npm來安裝vue-cli這個框架。

npm install vue-cli -g

安裝完成后可以使用vue -V 來測試是否安裝成功。（注意：這里要使用大寫的V，小寫無效）。

 （2）使用vue安裝 nuxt

安裝好vue-cli后，就可以使用init命令來初始化Nuxt.js項目。

vue init nuxt/starter

這時候他會在github上下載模版，然后會詢問你項目的名稱叫什么，作者什么的，這些完全可以根據(jù)自己的愛好填寫。

（3）使用npm install安裝依賴包

npm install

這個過程是要等一會的，如果你這個過程安裝失敗，可以直接誒刪除項目中的node_modules文件夾后，重新npm install進行安裝。

（4）使用npm run dev 啟動服務(wù)

（5）在瀏覽器輸入 localhost:3000,可以看到結(jié)果。

第三節(jié) ：Nuxt目錄結(jié)構(gòu)

第四節(jié)：Nuxt常用配置項

1.配置IP和端口

開發(fā)中經(jīng)常會遇到端口被占用或者指定IP的情況。我們需要在根目錄下的package.json里對config項進行配置。比如現(xiàn)在我們想把IP配置成127.0.0.1，端口設(shè)置1000。

/package.json

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

配置好后，我們在終端中輸入npm run dev，然后你會看到服務(wù)地址改為了127.0.0.1:1000.

2.配置全局CSS

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

比如現(xiàn)在我們要把頁面字體設(shè)置為紅色，就可以在assets/css/normailze.css文件，然后把字體設(shè)置為紅色。

/assets/css/normailze.css

html{
 color:red;
}

/nuxt.config.js
 css:['~assets/css/normailze.css'],

設(shè)置好后，在終端輸入npm run dev 。然后你會發(fā)現(xiàn)字體已經(jīng)變成了紅色。

3.配置webpack的loader

在nuxt.config.js里是可以對webpack的基本配置進行覆蓋的，比如現(xiàn)在我們要配置一個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)/
  })
  }
 }
 }

第五節(jié)：Nuxt的路由配置和參數(shù)傳遞

Nuxt.js的路由并不復(fù)雜，它給我們進行了封裝，讓我們節(jié)省了很多配置環(huán)節(jié)。

1.簡單路由Demo

我們現(xiàn)在根目錄的pages文件下新建兩個文件夾，about和news（模仿關(guān)于我們和新聞的功能模塊）。

（1）在about文件夾下新建index.vue文件，并寫入下面的代碼：

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

（2）在news文件夾下新建index.vue文件，并寫入下面的代碼：

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

（3）修改原來的pages文件夾下的index.vue，刪除沒用的代碼，寫入下面鏈接代碼：

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

由于Nuxt.js都為我們作好了，不用寫任何配置代碼。所以我們可以在頁面上實現(xiàn)相關(guān)跳轉(zhuǎn)。

2.<nuxt-link>標簽

雖然上面的例子跳轉(zhuǎn)已經(jīng)成功，但是Nuxt.js并不推薦這種<a>標簽的作法，它為我們準備了<nuxt-link>標簽（vue中叫組件）。我們先把首頁的<a>標簽替換成<nuxt-link>，改造如下：

<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'}">NEWS</nuxt-link></li>
 </ul>
 </div>
</template>
<script>
export default {
 components: {
 }
}
</script>
<style>
</style>

我們再次預(yù)覽頁面，也是可以進行正常跳轉(zhuǎn)的，在實際開發(fā)中盡量使用標簽的方法跳轉(zhuǎn)路由。

3.params傳遞參數(shù)

路由經(jīng)常需要傳遞參數(shù)，我們可以簡單的使用params來進行傳遞參數(shù)，我們現(xiàn)在向新聞頁面（news）傳遞個參數(shù)，然后在新聞頁面進行簡單的接收。

（1）我們先修改pages下的Index.vue文件，給新聞的跳轉(zhuǎn)加上params參數(shù)，傳遞3306。

<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>

（2）在news文件夾下的index.vue里用$route.params.newsId進行接收，代碼如下。

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

成功實現(xiàn)參數(shù)的傳遞。

第六節(jié)：Nuxt的動態(tài)路由和參數(shù)校驗

1.動態(tài)路由，其實動態(tài)路由就是帶參數(shù)的路由。比如我們現(xiàn)在新聞模塊下面有很多新聞詳細頁，這時候就需要動態(tài)路由的幫助了。

（1）新聞詳細頁面： 我在news文件夾下面新建了_id.vue的文件，以下畫線為前綴的Vue文件就是動態(tài)路由，然后在文件里邊有 $route.params.id來接收參數(shù)。

/pages/news/_id.vue

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

（2）修改新聞首頁路由

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

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

代碼寫好后，打開npm run dev 進行查看，我們已經(jīng)進入了新聞詳細頁，并在詳細頁中取得了傳遞過來的新聞id。

2.參數(shù)校驗

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

（1）在接受參數(shù)的頁面添加

/pages/news/_id.vue

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

使用了validate方法，并把params傳遞進去，然后用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面。

第七節(jié)：Nuxt的路由動畫效果

路由的動畫效果，也叫作頁面的更換效果。Nuxt.js提供兩種方法為路由提供動畫效果，一種是全局的，一種是針對單獨頁面制作。

1.全局路由動畫

全局動畫默認使用page來進行設(shè)置，例如現(xiàn)在我們?yōu)槊總€頁面都設(shè)置一個進入和退出時的漸隱漸現(xiàn)的效果。我們可以先在根目錄的assets/css下建立一個normailze.css文件。

（1）添加樣式文件

/assets/css/normailze.css(沒有請自行建立)

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

（2）文件配置

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

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

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

比如我們上節(jié)課作的動態(tài)路由新聞頁，你就需要改成下面的鏈接。

<li><nuxt-link :to="{name:'news-id',params:{id:123}}">News-1</nuxt-link></li>

改過之后你就會看到動畫效果了。

2.單獨設(shè)置頁面動效

想給一個頁面單獨設(shè)置特殊的效果時，我們只要在css里改變默認的page，然后在頁面組件的配置中加入transition字段即可。例如，我們想給about頁面加入一個字體放大然后縮小的效果，其他頁面沒有這個效果。

（1）在全局樣式assets/main.css 中添加以下內(nèi)容

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

（2）然后在about/index.vue組件中設(shè)置

export default {
 transition:'test'
}

這時候就有了頁面的切換獨特動效了。

總結(jié)：在需要使用的頁面導(dǎo)入即可。

第八節(jié)：Nuxt的默認模版和默認布局

在開發(fā)應(yīng)用時，經(jīng)常會用到一些公用的元素，比如網(wǎng)頁的標題是一樣的，每個頁面都是一模一樣的標題。這時候我們有兩種方法，第一種方法是作一個公用的組件出來，第二種方法是修改默認模版。這兩種方法各有利弊，比如公用組件更加靈活，但是每次都需要自己手動引入；模版比較方便，但是只能每個頁面都引入。

1.默認模板

Nuxt為我們提供了超簡單的默認模版訂制方法，只要在根目錄下創(chuàng)建一個app.html就可以實現(xiàn)了?，F(xiàn)在我們希望每個頁面的最上邊都加入“ 學(xué)習(xí)nuxt.js” 這幾個字，我們就可以使用默認模版來完成。

app.html中：

<!DOCTYPE html>
<html lang="en">
<head>
 {{ HEAD }}
</head>
<body>
 <p>學(xué)習(xí)nuxt.js</p>
 {{ APP }}
</body>
</html>

這里的{{ HEAD }}讀取的是nuxt.config.js里的信息，{{APP}} 就是我們寫的pages文件夾下的主體頁面了。需要注意的是HEAD和APP都需要大寫，如果小寫會報錯的。

注意：如果你建立了默認模板后，記得要重啟服務(wù)器，否則顯示不會成功；但是默認布局是不用重啟服務(wù)器的。

2.默認布局

默認模板類似的功能還有默認布局，但是從名字上你就可以看出來，默認布局主要針對于頁面的統(tǒng)一布局使用。它在位置根目錄下的layouts/default.vue。需要注意的是在默認布局里不要加入頭部信息，只是關(guān)于<template>標簽下的內(nèi)容統(tǒng)一訂制。

需求：我們在每個頁面的最頂部放入“學(xué)習(xí)nuxt.js” 這幾個字，看一下在默認布局里的實現(xiàn)。

<template>
 <div>
 <p>學(xué)習(xí)nuxt.js</p>
 <nuxt/>
 </div>
</template>

這里的<nuxt/>就相當(dāng)于我們每個頁面的內(nèi)容，你也可以把一些通用樣式放入這個默認布局里，但會增加頁面的復(fù)雜程度。

總結(jié)：要區(qū)分默認模版和默認布局的區(qū)別，模版可以訂制很多頭部信息，包括IE版本的判斷；模版只能定制<template>里的內(nèi)容，跟布局有關(guān)系。在工作中修改時要看情況來編寫代碼。

第九節(jié)：Nuxt的錯誤頁面和個性meta設(shè)置

當(dāng)用戶輸入路由錯誤的時候，我們需要給他一個明確的指引，所以說在應(yīng)用程序開發(fā)中404頁面是必不可少的。Nuxt.js支持直接在默認布局文件夾里建立錯誤頁面。

1.建立錯誤頁面

在根目錄下的layouts文件夾下建立一個error.vue文件，它相當(dāng)于一個顯示應(yīng)用錯誤的組件。

<template>
 <div>
  <h2 v-if="error.statusCode==404">404頁面不存在</h2>
  <h2 v-else>500服務(wù)器錯誤</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>的簡單寫法直接跟上路徑就可以了。

2.個性meta設(shè)置

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

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

/pages/news/index.vue

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

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

<template>
 <div>
  <h2>News-Content [{{$route.params.id}}]</h2>
  <ul>
  <li><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >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,
 }
 },
//獨立設(shè)置head信息
 head(){
  return{
  title:this.title,
  meta:[
   {hid:'description',name:'news',content:'This is news page'}
  ]
  }
 }
}
</script>

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

第十節(jié)：asyncData方法獲取數(shù)據(jù)

Nuxt.js貼心的為我們擴展了Vue.js的方法，增加了anyncData，異步請求數(shù)據(jù)。

（1）創(chuàng)建遠程數(shù)據(jù)

在這里制作一些假的遠程數(shù)據(jù)，我選擇的網(wǎng)站是myjson.com，它是一個json的簡單倉庫，學(xué)習(xí)使用是非常適合的。 我們打開網(wǎng)站，在對話空中輸入JSON代碼，這個代碼可以隨意輸入，key和value均采用字符串格式創(chuàng)建。

{
 "name": "Nuxt",
 "age": 18,
 "interest": "I love coding!"
}

輸入后保存，網(wǎng)站會給你一個地址，這就是你這個JSON倉庫的地址了。https://api.myjson.com/bins/1ctwlm

（2）安裝Axios

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

npm install axios --save

1.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/1ctwlm')
  .then((res)=>{
   console.log(res)
   return {info:res.data}
  })
 }
}
</script>

 這時候我們可以看到，瀏覽器中已經(jīng)能輸出結(jié)果了。asyncData的方法會把值返回到data中。是組件創(chuàng)建（頁面渲染）之前的動作，所以不能使用this.info,
 return {info:res.data}相當(dāng)于在data中多了一個info:''。

2.ansycData的await方法

當(dāng)然上面的方法稍顯過時，現(xiàn)在都在用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/8gdmr')
  return {info: data}
 }
}
</script>

第十一節(jié)：靜態(tài)資源和打包

1.靜態(tài)資源

（1）直接引入圖片
在網(wǎng)上任意下載一個圖片，放到項目中的static文件夾下面，然后可以使用下面的引入方法進行引用

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

“~”就相當(dāng)于定位到了項目根目錄，這時候圖片路徑就不會出現(xiàn)錯誤，就算打包也是正常的。

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

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

這時候在npm run dev 下是完全正常的。

2.打包

用Nuxt.js制作完成后，你可以打包成靜態(tài)文件并放在服務(wù)器上，進行運行。

在終端中輸入：

npm run generate

然后在dist文件夾下輸入live-server就可以了。

總結(jié)：

Nuxt.js框架非常簡單，因為大部分的事情他都為我們做好了，我們只要安裝它的規(guī)則來編寫代碼。

以上所述是小編給大家介紹的Nuxt.js開啟SSR渲染的教程詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論