Nuxt.js主要用在vue做PC端推廣時用，因為vue的單一頁面原則，使得其做SEO時并不好，下面簡單介紹下，自己用時的流程-操作。
1.安裝 vue-cli
npm install vue-cli -g
2.使用 vue安裝 nuxt
vue init nuxt/starter
3.生成項目
npm install && npm run dev ， 打開 localhost:3000 窗口即可查看
4.nuxt的項目目錄
在文件下面有 README.md可自行查看其作用
5.常用配置：
① IP與端口在 packge.json 中加入
"config": {
"nuxt": {
"host": "127.0.0.1",//默認主機 loaclhost
"port": "3002"http://你的端口號
}
}
②全局CSS
在 assets/css/目錄下創(chuàng)建一個css ，在 nuxt.config.js中引入，例如：
css:['~assets/css/global.css'],
配置webpack的loader ， nuxt.config.js的build選項里進行配置，例如：現在我們要配置一個url-loader來進行小圖片的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已經沒有了，它會自動給你創(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.路由跳轉
<nuxt-link :to="{name:'index'}">HOME</nuxt-link>
<nuxt-link :to="{name:'news',params:{newsId:3306}}">NEWS</nuxt-link>
這里也可以用 path/query，跟vue一樣
6.動態(tài)路由
比如我做新聞：在pages/news文件夾下面新建了_id.vue的文件，在跳轉之前 <nuxt-link :to="{path:'/news/456'}">News-3</nuxt-link>，我把456傳到 _id.vue中，這樣取出： {{$route.params.id}}
7.路由動畫
動畫分為：全局動畫-局部動畫（使用什么效果自己定義）。全局動畫，例如：我剛才配置的global.css中添加下面代碼，就成功：
.page-enter-active, .page-leave-active {
transition: opacity 2s;
}
.page-enter, .page-leave-active {
opacity: 0;
}
局部動畫，也在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;
}
在寫入成功后，進入所需引入的頁面引入，transition:'test'，與data(){}同級
8.默認模板-默認布局
默認模板：根目錄下創(chuàng)建一個app.html，{{ HEAD }}讀取的是nuxt.config.js里的信息，{{APP}} 就是我們寫的pages文件夾下的主體頁面
<!DOCTYPE html>
<html lang="en">
<head>
{{ HEAD }}
</head>
<body>
<p>leesession.com 固定內容</p>
{{ APP }}
</body>
</html>
默認布局:根目錄下的layouts/default.vue，如：
<template>
<div>
<p>固定內容</p>
<nuxt/>
</div>
</template>
9.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>
meta設置:在每個vue頁面中，都有一個head方法來讓我們改變title以及content：
//獨立設置head信息
head(){
return{
title:this.title,//頁面的title
meta:[
{hid:'description',name:'news',content:'This is news page'}
]//hid是覆蓋，
}
}
10.asyncData方法獲取數據
nuxt增加了anyncData，直接調用就行，例如：
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并運行：npm run generate ，然后在dist文件夾下輸入live-server就可以了。
