Nuxt.js主要用在vue做PC端推廣時(shí)用，因?yàn)関ue的單一頁面原則动遭，使得其做SEO時(shí)并不好明垢，下面簡單介紹下，自己用時(shí)的流程-操作频轿。
1.安裝 vue-cli
npm install vue-cli -g
2.使用 vue安裝 nuxt
vue init nuxt/starter
3.生成項(xiàng)目
npm install && npm run dev 垂涯， 打開 localhost:3000 窗口即可查看
4.nuxt的項(xiàng)目目錄
在文件下面有 README.md可自行查看其作用
5.常用配置：
① IP與端口在 packge.json 中加入
"config": {
"nuxt": {
"host": "127.0.0.1",//默認(rèn)主機(jī) loaclhost
"port": "3002"http://你的端口號(hào)
}
}
②全局CSS
在 assets/css/目錄下創(chuàng)建一個(gè)css ，在 nuxt.config.js中引入航邢，例如：
css:['~assets/css/global.css'],
配置webpack的loader 耕赘， nuxt.config.js的build選項(xiàng)里進(jìn)行配置，例如：現(xiàn)在我們要配置一個(gè)url-loader來進(jìn)行小圖片的64位打包
build: {
loaders:[
{
test:/\.(png|jpe?g|gif|svg)$/,
loader:"url-loader",
query:{
limit:10000,
name:'img/[name].[hash].[ext]'
}
}
],
4.路由配置
在nuxt.js中膳殷，像vue-clic中的 router/index.js已經(jīng)沒有了操骡，它會(huì)自動(dòng)給你創(chuàng)建。在 pages文件夾下面來創(chuàng)建赚窃。
直接創(chuàng)建vue册招，路由如：http://localhost:3002/ansyData
在pages下創(chuàng)建路由，下創(chuàng)建vue文件勒极，如：pages/index/index.vue,這樣的路由是掰，如：http://localhost:3002/index/index
5.路由跳轉(zhuǎn)
<nuxt-link :to="{name:'index'}">HOME</nuxt-link>
<nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>
這里也可以用 path/query，跟vue一樣
6.動(dòng)態(tài)路由
比如我做新聞：在pages/news文件夾下面新建了_id.vue的文件辱匿，在跳轉(zhuǎn)之前 <nuxt-link :to="{path:'/news/456'}">News-3</nuxt-link>键痛，我把456傳到 _id.vue中，這樣取出： {{$route.params.id}}
7.路由動(dòng)畫
動(dòng)畫分為：全局動(dòng)畫-局部動(dòng)畫（使用什么效果自己定義）匾七。全局動(dòng)畫絮短，例如：我剛才配置的global.css中添加下面代碼，就成功：
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
局部動(dòng)畫乐尊，也在global.css中配置戚丸，添加如下代碼(我用test)：
.test-enter-active, .test-leave-active {
transition: all 2s;
font-size:12px;
}
.test-enter, .test-leave-active {
opacity: 0;
font-size:40px;
}
在寫入成功后，進(jìn)入所需引入的頁面引入扔嵌，transition:'test'限府，與data(){}同級(jí)
8.默認(rèn)模板-默認(rèn)布局
默認(rèn)模板：根目錄下創(chuàng)建一個(gè)app.html，{{ HEAD }}讀取的是nuxt.config.js里的信息痢缎，{{APP}} 就是我們寫的pages文件夾下的主體頁面
<!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
<p>leesession.com 固定內(nèi)容</p>
{{ APP }}
</body>
</html>
默認(rèn)布局:根目錄下的layouts/default.vue胁勺，如：
<template>
<div>
<p>固定內(nèi)容</p>
<nuxt/>
</div>
</template>
9.Nuxt的錯(cuò)誤頁面和個(gè)性meta設(shè)置
錯(cuò)誤頁面：layouts文件夾下建立一個(gè)error.vue，可以默認(rèn)這樣寫
<template>
<div>
<h2 v-if="error.statusCode==404">404頁面不存在</h2>
<h2 v-else>500服務(wù)器錯(cuò)誤</h2>
<ul>
<li><nuxt-link to="/">HOME</nuxt-link></li>
</ul>
</div>
</template>
<script>
export default {
props:['error'],
}
</script>
meta設(shè)置:在每個(gè)vue頁面中独旷，都有一個(gè)head方法來讓我們改變title以及content：
//獨(dú)立設(shè)置head信息
head(){
return{
title:this.title,//頁面的title
meta:[
{hid:'description',name:'news',content:'This is news page'}
]//hid是覆蓋署穗，
}
}
10.asyncData方法獲取數(shù)據(jù)
nuxt增加了anyncData，直接調(diào)用就行嵌洼，例如：
async asyncData(){
let {data}=await axios.get(url)
return {info: data}
}
11.靜態(tài)資源和打包
圖片：<img src="~static/logo.png" /> ~指向根目錄
背景圖：background-image: url('~static/logo.png') 同理
打包靜態(tài)HTML并運(yùn)行：npm run generate 案疲，然后在dist文件夾下輸入live-server就可以了。
