一、Nuxt常用配置項
1、配置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.
2、配置全局CSS
在nuxt.config.js裏進行操作：
//assets/css/normailze.css
html{
color:red;
}
//nuxt.config.js
css:['~assets/css/normailze.css'], //~表示nuxt項目根目錄二、Nuxt的路由配置和參數傳遞
基本路由：
Nuxt根據文件目錄結構，自動給我們配置好了路由
路由跳轉不要使用a標籤，因爲這樣會有頁面的刷新跳轉
使用<nuxt-link></<nuxt-link>>標籤
//index.vue
<template>
<div>
<h2>About Index page</h2>
<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>
//news/index.vue
<template>
<div>
<h2>News</h2>
<ul>
<li>userId:{{$route.params.newsId}}</li>
<li><nuxt-link :to="{name:'index'}">home</nuxt-link></li>
</ul>
</div>
</template>三、Nuxt的動態路由和參數校驗
動態路由：即帶參數的路由
動態路由命名都以 _xx 爲前綴，比如_id.vue，接收使用：$route.params.id來接收參數。
這裏的id和動態路由的名稱一樣
動態參數校驗：
進入一個頁面，對參數傳遞的正確性校驗是必須的，Nuxt.js也貼心的爲我們準備了校驗方法validate( )。
//pages/news/_id.vue
export default {
validate ({ params }) {
// Must be a number
return /^\d+$/.test(params.id)
}
}我們使用了validate方法，並把params傳遞進去，然後用正則進行了校驗，如果正則返回了true正常進入頁面，如果返回false進入404頁面( nuxt已經幫我們默認建立好了 )。
四、Nuxt的路由動畫效果
樣式寫在全局樣式：normailze.css裏面
1、全局路由動畫
.page-enter-active,.page-leave-active{ transition:opacity 2s }
.page-enter,.page-leave-active{ opacity:0 }
2、單頁路由動畫
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;
}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
然後在about/index.vue組件中設置
export default {
transition:'test'
}
這時候在進入about頁面就有了頁面的切換獨特動效了。
五、Nuxt的默認模版和默認佈局
目的：複用公共元素，比如網頁標題等等
1、默認模板，可以定義包括head在內的一些公用的元素，這裏是app.html，一個完整的html文件
在根目錄下創建一個app.html就可以實現默認模板的創建
<!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
<p>jspang.com 技術胖的博客</p>
{{ APP }}
</body>
</html>這裏的{{ HEAD }}讀取的是nuxt.config.js裏的head信息，{{APP}} 就是我們寫的pages文件夾下的主體頁面了，比如about、news等等。需要注意的是HEAD和APP都需要大寫，如果小寫會報錯的。
修改後需要重啓服務
2、默認佈局，這裏是default.vue，一個vue組件，只可定製template
默認佈局主要針對於頁面的統一佈局使用。它在位置根目錄下的layouts/default.vue。需要注意的是在默認佈局裏不要加入頭部信息，只是關於<template>標籤下的內容統一訂製。
<template>
<div>
<p>JSPang.com 技術胖的博客</p>
<nuxt/>
</div>
</template>這裏的<nuxt/>就相當於我們每個頁面的內容，你也可以把一些通用樣式放入這個默認佈局裏，但是個人不建議這樣寫，會增加頁面的複雜程度。
修改後不需要重啓服務
總結：要區分默認模版和默認佈局的區別，模版可以定製很多頭部信息，包括IE版本的判斷；模版只能定製<template>裏的內容，跟佈局有關係。在工作中修改時要看情況來編寫代碼。
注意：工作中一般都是定義默認佈局
六、Nuxt的錯誤頁面和個性meta設置
當用戶輸入路由錯誤的時候，我們需要給他一個明確的指引，所以說在應用程序開發中404頁面是必不可少的。Nuxt.js支持直接在默認佈局文件夾裏建立錯誤頁面。
1、建立錯誤頁面
在根目錄下的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的。
注：這裏的error和statusCode都是nuxt定義好的
2、個性meta設置
頁面的Meta對於SEO的設置非常重要，每個頁面都應該有屬於自己內容的title和meta設置。直接使用head方法來設置當前頁面的頭部信息就可以了。
我們先把pages/news/index.vue頁面的鏈接進行修改一下，傳入一個title，目的是爲了在新聞具體頁面進行接收title，形成文章的標題。
//pages/news/index.vue
<li><nuxt-link :to="{name:'news-id',params:{id:123,title:'jspang.com'}}">News-1</nuxt-link></li>
///pages/news/_id.vue
<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,
}
},
//獨立設置news內容頁的head信息
head(){
return{
title:this.title,
meta:[
{hid:'description',name:'news',content:'This is news page'}
]
}
}
}
</script>注意：爲了避免子組件中的meta標籤不能正確覆蓋父組件中相同的標籤而產生重複的現象，建議利用 hid 鍵爲meta標籤配一個唯一的標識編號。
七、asyncData異步方法獲取數據
在項目中需要在初始化頁面前先得到數據，也就是我們常說的異步請求數據
1、普通vue方式異步獲取遠程數據
<template>
<div class="">
<ul>
<li>姓名：{{info.name}}</li>
<li>年齡：{{info.age}}</li>
<li>興趣：{{info.interest}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default{
name:'asyncData',
data(){
return {
name:'hello world',
info:{}
}
},
created(){
return axios.get('https://api.myjson.com/bins/1hjiso')
.then((data)=>{
console.log(data.data)
this.info = data.data
})
}
}
</script>2、使用nuxt封裝的anyncData方法，直接在data下面書寫anyncData方法，不用寫在methods裏面
<template>
<div class="">
<ul>
<li>姓名：{{info.name}}</li>
<li>年齡：{{info.age}}</li>
<li>興趣：{{info.interest}}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default{
name:'asyncData',
data(){
return {
name:'hello world',
info:{}
}
},
asyncData(){
return axios.get('https://api.myjson.com/bins/8gdmr')
.then((res)=>{
console.log(res)
return {info:res.data}
})
}
}
</script>八、靜態資源和打包
1、圖片、樣式路徑均使用~，這種引用方法是不用估計相對路徑的，“~”就相當於定位到了項目根目錄
2、打包靜態HTML並運行
npm run generate，生成dist文件夾，在dist文件夾下使用命令：live-server即可查看打包後的效果