一、简介
Nuxt.js提供前端渲染的方式使页面有利于SEO，后端有利于开发。
1.1 工作原理
访问的网页由Nuxt.js请求服务端数据，获取后在进行服务端渲染，然后将渲染后的html页面返回，（套接一层服务）
1.2 使用技术
Nuxt.js使用Vue.js+webpack+Babel三大技术框架/组件
Babel 是一个js的转码器，负责将ES6的代码转成浏览器识别的ES5代码。 Webpack是一个前端工程打包工具。 Vue.js是一个优秀的前端框架。
二、基本使用
nuxt.js有标准的目录结构，官方提供了模板工程，可以模板工程快速创建nuxt项目。 模板工程地址：https://github.com/nuxt-community/starter-template/archive/master.zip
2.1 目录介绍
‐ 资源目录
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
‐ 组件目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
‐ 布局目录
布局目录 layouts 用于组织应用的布局组件。
该目录名为Nuxt.js保留的，不可更改。
‐ 中间件目录
middleware 目录用于存放应用的中间件。
‐ 页面目录
页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
该目录名为Nuxt.js保留的，不可更改。
‐ 插件目录
插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
‐ 静态文件目录
静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/logo.png 映射至 /logo.png
该目录名为Nuxt.js保留的，不可更改。
‐ Store 目录
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
该目录名为Nuxt.js保留的，不可更改。
‐ nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
该文件名为Nuxt.js保留的，不可更改。
‐ package.json 文件
package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
该文件名为Nuxt.js保留的，不可更改。2.2 别名
2.3 页面布局
页面布局就是页面内容的整体结构，通过在layouts目录下添加布局文件来实现。在layouts 根目录下的所有文件都属于个性化布局文件，可以在页面组件中利用 layout 属性来引用。
layouts/***.vue布局文件
<template>
<div>
<div>头</div>
<nuxt/><!-- 表示页面展示的位置-->
<div>尾</div>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>在要嵌套布局的页面
<template>
<div>
页面内容
</div>
</template>
<script>
export default{
layout:'***'//布局文件名称
}
</script>
<style>
</style>2.4 路由
2.4.1 基础路由
Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。
/test1/test2 test1表示pages下的目录 test2表示test1下的文件2.4.2 嵌套路由
可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。
创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。
在父级 Vue 文件内增加 用于显示子视图内容。
<nuxt‐link :to="'/test/test'">显示子页面内容</nuxt‐link>
<nuxt‐child/>2.5 获取数据
2.5.1 asyncData方法
Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法， asyncData 方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用 asyncData 方法来获取数据，Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法 返回的数据一并返回给当前组件。 注意：由于asyncData 方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
2.5.2 async/await方法
使用async 和 await配合promise也可以实现同步调用，nuxt.js中使用async/await实现同步调用效果。
async asyncData({ store, route }) {
console.log("async方法")
var a = await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("1")
resolve(1)
},2000)
});
var a = await new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("2")
resolve(2)
},1000)
});
return {
}
},