一：Nuxt.js是什么

一个基于Vue.js生态的第三方开源服务端渲染应用框架
它可以帮助我们轻松的使用Vue.js技术构建应用

二：初始化Nuxt.js项目

方式一 : 命令一键创建

使用 create-nuxt-app

方式二：手动创建

npm init -y
npm i nuxt
创建page目录
在page目录里面创建index.vue文件
运行项目 npm run dev

三：Nuxt.js-路由-基本路由

四：Nuxt.js-路由-路由导航

a标签会刷新整个页面，不要使用
nuxt-link组件和router-link一样
编程式导航 this.$router.push()

五：Nuxt.js-路由-动态路由

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件或者目录

六：Nuxt.js-路由-嵌套路由

创建内嵌套子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录原来存放子视图组件
需要在父路由页面写一个子路由出口

七：Nuxt.js-路由-自定义路由配置

创建nuxt.config.js进行配置
base：应用的根URL。如果整个单页面应用的所有资源可以通过/app/ 来访问，那么base配置项的值需要设置为 ‘/app/’
routeNameSplitter：你可能希望更改 Nuxt.js 使用的路由名称之间的分隔符。你可以通过配置文件中的routeNameSplitter选项执行此操作
extendRoutes：你可能希望扩展Nuxt.js创建的路由。你可以通过extendRoutes选项执行此操作。例如自定义路由
linkActiveClass：全局配置<nuxt-link>默认的激活类名
linkExactActiveClass：全局配置<nuxt-link>默认的active class
linkPrefetchedClass：全局配置<nuxt-link>默认值(默认情况下禁用功能)
middleware：为应用的每个页面设置默认的中间件
mode：配置路由的模式，鉴于服务端渲染的特性，不建议修改该配置
scrollBehavior：配置项用于个性化配置跳转至目标页面后的页面滚动位置。每次页面渲染后都会调用 scrollBehavior 配置的方法
parseQuery / stringfiyQuery：提供自定义查询字符串解析/字符串化功能。覆盖默认值
prefetchLinks：要全局禁用所有链接的预取，要禁用特定链接上的预取，可以使用ni-prefetch 属性
fallback：当浏览器不支持 history.pushState但模式设置为 history 时，控制路由器是否后回退

八：Nuxt.js-视图-模板

九：Nuxt.js-视图-布局

Nuxt.js 允许你扩展默认的布局，或在 layout 目录下创建自定义的布局
可以提供添加 layouts/default.vue 文件来扩展应用的默认布局
提示：别忘记在布局文件中添加<nuxt /> 组件用于显示页面的主体内容
可以使用layout 属性设置页面默认的布局组件

十：Nuxt.js-异步数据

Nuxt.js 扩展了 Vue.js 增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。
当你想要动态页面内容有利于 SEO 或者是提升首屏渲染速度的时候，就在 asyncData中发送请求拿数据

基本用法

它会将asyncData返回的数据融合组件data方法返回数据一并给组件
调用时机：服务端渲染期间和客服端路由更新之前

注意事项

只能在页面组件中使用(页面，可用于组件传值)
没有this，因为它是在组件初始化之前被调用

十一：Nuxt.js-异步数据-上下文对象

可通过 API context 来了解该对象的所有属性和方法
可以使用注入asyncData 属性的 context对象来访问动态路由数据

十二：Nuxt.js-自定义路由规则

使用extendRoutes

十三：Nuxt.js-登录状态持久化

十四：Nuxt.js-中间件

expore default function ({ store, redirect }) {
// store 这个是 vuex 的容器对象
// redirect 重定向方法
// 如果容器里面没有user  则跳转登陆页面
if(!store.state.user){
  return redirect('/login')
}
}

十五：Nuxt.js-watchQuery属性

使用watchQuery属性可以监听参数字符串的更改。如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, ...)。为了提高性能，默认情况下禁用。
如果您要为所有参数字符串设置监听，请设置：watchQuery: true

十六：Nuxt.js-插件

十七：Nuxt.js-设置页面meta优化SEO