特性

基于 Vue.js
自动代码分层
服务端渲染
强大的路由功能，支持异步数据
静态文件服务
ES2015+ 语法支持
打包和压缩 JS 和 CSS
HTML 头部标签管理
本地开发支持热加载
集成 ESLint
支持各种样式预处理器： SASS、LESS、 Stylus 等等
支持 HTTP/2 推送、

为了快速入门，Nuxt.js团队创建了脚手架工具 create-nuxt-app。

确保安装了npx（npx在NPM版本5.2.0默认安装了）：

npx create-nuxt-app <项目名>

启动项目:

 cd <project-name>
 npm run dev

别名

别名	目录
`~` 或 `@`	srcDir
`~~` 或 `@@`	rootDir

默认情况下，srcDir 和 rootDir 相同。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。

路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

要在页面之间使用路由，我们建议使用<nuxt-link> 标签。

假设 pages 的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'user',
      path: '/user',
      component: 'pages/user/index.vue'
    },
    {
      name: 'user-one',
      path: '/user/one',
      component: 'pages/user/one.vue'
    }
  ]
}

动态路由

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

路由参数校验

validate

嵌套路由

可以通过 vue-router 的子路由创建 Nuxt.js 应用的嵌套路由。

创建内嵌子路由，你需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。

Warning: 别忘了在父组件(.vue文件) 内增加 <nuxt-child/> 用于显示子视图内容。

命名视图

要渲染命名视图，您可以在布局(layout) / 页面(page)中使用 <nuxt name="top"/> 或 <nuxt-child name="top"/> 组件。要指定页面的命名视图，我们需要在nuxt.config.js文件中扩展路由器配置：

export default {
  router: {
    extendRoutes (routes, resolve) {
      const index = routes.findIndex(route => route.name === 'main')
      routes[index] = {
        ...routes[index],
        components: {
          default: routes[index].component,
          top: resolve(__dirname, 'components/mainTop.vue')
        },
        chunkNames: {
          top: 'components/mainTop'
        }
      }
    }
  }
}

它需要使用两个属性 components 和 chunkNames 扩展路由。此配置示例中的命名视图名称为 top 。

中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

每一个中间件应放置在 middleware/ 目录。文件名的名称将成为中间件名称(middleware/auth.js将成为 auth 中间件)。

一个中间件接收 context 作为第一个参数：

中间件执行流程顺序：

nuxt.config.js
匹配布局
匹配页面

export default function(context) {}

context是nuxt中最大的参数，可以获取所有的东西，请求参数，store

//应用场景：

但凡的请求过程中需要的公共事务，就可以放在全局路由改变的中间件来完成

nuxt.config.js

插件
axios
nuxt中使用axios
安装
npm i -S @nuxtjs/axios @nuxtjs/proxy
nuxt.config.js

{
    modules:[
        '@nuxt/axios',
        '@nuxt/proxy'
    ],
    proxy:[//跨域代理
       ['/api/dog',{
            target:'htts://dog.ceo/',
        pathRewrite:{
            '^/api/dog':'/api/breads/image/random'
                    }
        }
    
    ]
]
}


url-loader  小文件base-64化能有效减少HTTP请求数。
在任何 Vue 组件的生命周期内， 只有 beforeCreate 和 created 这两个方法会在 客户端和服务端被调用。其他生命周期函数仅在客户端被调用。
asyncData可以在服务器端使用，也可以在客户端使用，在客户端运行就相当于发送ajax请求，在服务端运行就发送服务端请求，
必须要与data属性一起使用，会自动合并与data的属性，相当与created
注意：由于asyncData方法是在组件 初始化 前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。
在服务器端和客户端都可以使用生命周期钩子：created beforeCreated


nuxt默认服务器端渲染，可以配置spa的模式启动：
在package.json中scripts中添加：
'start-spa':'nuxt start --spa'   npm run start-spa

nuxt

特性

别名

路由

动态路由

路由参数校验

嵌套路由

命名视图

中间件