//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即可查看打包后的效果
原文：https://blog.51cto.com/9161018/2379250