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"//你的端口号
}
}
②全局CSS
在 assets/css/目录下创建一个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已经没有了，它会自动给你创建。在 pages文件夹下面来创建。
直接创建vue，路由如：http://localhost:3002/ansyData
在pages下创建路由，下创建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.动态路由
比如我做新闻：在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.默认模板-默认布局
默认模板：根目录下创建一个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.静态资源和打包
图片：<img src="~static/logo.png" /> ~指向根目录
背景图：background-image: url('~static/logo.png') 同理
打包静态HTML并运行：npm run generate ，然后在dist文件夹下输入live-server就可以了。
网友评论