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

為南漳等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及南漳網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、南漳網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

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

2.什么是SSR？

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

SSR兩個(gè)優(yōu)點(diǎn)：

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

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

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

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

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

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

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

1.nuxt.js安裝

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

（1）用npm來(lái)安裝vue-cli這個(gè)框架。

npm install vue-cli -g

安裝完成后可以使用vue -V 來(lái)測(cè)試是否安裝成功。（注意：這里要使用大寫(xiě)的V，小寫(xiě)無(wú)效）。

 （2）使用vue安裝 nuxt

安裝好vue-cli后，就可以使用init命令來(lái)初始化Nuxt.js項(xiàng)目。

vue init nuxt/starter

這時(shí)候他會(huì)在github上下載模版，然后會(huì)詢問(wèn)你項(xiàng)目的名稱叫什么，作者什么的，這些完全可以根據(jù)自己的愛(ài)好填寫(xiě)。

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

npm install

這個(gè)過(guò)程是要等一會(huì)的，如果你這個(gè)過(guò)程安裝失敗，可以直接誒刪除項(xiàng)目中的node_modules文件夾后，重新npm install進(jìn)行安裝。

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

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

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

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

1.配置IP和端口

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

/package.json

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

配置好后，我們?cè)诮K端中輸入npm run dev，然后你會(huì)看到服務(wù)地址改為了127.0.0.1:1000.

2.配置全局CSS

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

比如現(xiàn)在我們要把頁(yè)面字體設(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 。然后你會(huì)發(fā)現(xiàn)字體已經(jīng)變成了紅色。

3.配置webpack的loader

在nuxt.config.js里是可以對(duì)webpack的基本配置進(jìn)行覆蓋的，比如現(xiàn)在我們要配置一個(gè)url-loader來(lái)進(jìn)行小圖片的64位打包。就可以在nuxt.config.js的build選項(xiàng)里進(jìn)行配置。

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ù)雜，它給我們進(jìn)行了封裝，讓我們節(jié)省了很多配置環(huán)節(jié)。

1.簡(jiǎn)單路由Demo

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

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

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

（3）修改原來(lái)的pages文件夾下的index.vue，刪除沒(méi)用的代碼，寫(xiě)入下面鏈接代碼：

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

2.標(biāo)簽

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

我們?cè)俅晤A(yù)覽頁(yè)面，也是可以進(jìn)行正常跳轉(zhuǎn)的，在實(shí)際開(kāi)發(fā)中盡量使用標(biāo)簽的方法跳轉(zhuǎn)路由。

3.params傳遞參數(shù)

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

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

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

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

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

1.動(dòng)態(tài)路由，其實(shí)動(dòng)態(tài)路由就是帶參數(shù)的路由。比如我們現(xiàn)在新聞模塊下面有很多新聞詳細(xì)頁(yè)，這時(shí)候就需要?jiǎng)討B(tài)路由的幫助了。

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

/pages/news/_id.vue

（2）修改新聞首頁(yè)路由

我們?cè)?pages/news/index.vue進(jìn)行修改，增加兩個(gè)詳細(xì)頁(yè)的路由News-1和News-2。

代碼寫(xiě)好后，打開(kāi)npm run dev 進(jìn)行查看，我們已經(jīng)進(jìn)入了新聞詳細(xì)頁(yè)，并在詳細(xì)頁(yè)中取得了傳遞過(guò)來(lái)的新聞id。

2.參數(shù)校驗(yàn)

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

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

/pages/news/_id.vue

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

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

第七節(jié)：Nuxt的路由動(dòng)畫(huà)效果

路由的動(dòng)畫(huà)效果，也叫作頁(yè)面的更換效果。Nuxt.js提供兩種方法為路由提供動(dòng)畫(huà)效果，一種是全局的，一種是針對(duì)單獨(dú)頁(yè)面制作。

1.全局路由動(dòng)畫(huà)

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

（1）添加樣式文件

/assets/css/normailze.css(沒(méi)有請(qǐng)自行建立)

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

（2）文件配置

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

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

這時(shí)候在頁(yè)面切換的時(shí)候就會(huì)有2秒鐘的動(dòng)畫(huà)切換效果了，但是你會(huì)發(fā)現(xiàn)一些頁(yè)面是沒(méi)有效果的，這是因?yàn)槟銢](méi)有是組件來(lái)制作跳轉(zhuǎn)鏈接。你需要進(jìn)行更改。

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

改過(guò)之后你就會(huì)看到動(dòng)畫(huà)效果了。

2.單獨(dú)設(shè)置頁(yè)面動(dòng)效

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

（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'
}

這時(shí)候就有了頁(yè)面的切換獨(dú)特動(dòng)效了。

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

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

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

1.默認(rèn)模板

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

app.html中：

 {{ HEAD }}


 
學(xué)習(xí)nuxt.js
 {{ APP }}

這里的{{ HEAD }}讀取的是nuxt.config.js里的信息，{{APP}} 就是我們寫(xiě)的pages文件夾下的主體頁(yè)面了。需要注意的是HEAD和APP都需要大寫(xiě)，如果小寫(xiě)會(huì)報(bào)錯(cuò)的。

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

2.默認(rèn)布局

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