Nuxt.js真的很容易上手，快速教程

Nuxt是一个框架，给开发者提供强大的体系结构。它可逐步采用，可用于创建从静态登录页面到复杂的企业就绪Web应用程序。

本质上通用，它支持不同的目标（服务器，无服务器或静态），并且服务器端呈现是可切换的。

它可以通过强大的模块生态系统进行扩展，可以轻松连接REST或GraphQL端点，收藏夹CMS，CSS框架等。PWA和AMP支持只是Nuxt项目的一个模块。

NuxtJS是您的Vue.js项目的基础，它提供了结构，使您可以放心地构建项目，同时保持灵活性。

同时Nuxtjs 支持vue2、vue router、vuex、vue server renderer、vue-meta。它的架构图如下：

它的工作流大致为：Incoming Request浏览器发出请求，服务端接收请求后检查有没有nuxtServerlnit配置项，有的话执行middelware，做任何你想做的功能，validate()配合路由做验证，asyncDate()、fetch()用来获取数据，区别在于前者用来渲染组件，或者用来修改vuex store。

一、Nuxt.js的安装

vue init nuxt-community/koa-template

二、路由示例

import Router from 'koa-router'

const router = new Router({
  prefix: '/city'
})

router.get('/list', async (ctx) => {
  ctx.body = {
    list: ['长沙', '武汉']
  }
})
export default router

三、页面模板示例

公共组件放在模板里，新建的页面会默认找到模板文件，模板是自定义的，都会带出来。

在layouts下都是模板，没有声明时都是用default.vue。如下图所示：

四、异步数据示例

asyncData方法：有时，我们只想获取数据并在服务器上预渲染而不使用存储。 asyncData每次在加载页面组件之前都会调用。导航到其他路由时，它将一次称为服务器端（在对Nuxt应用程序的第一个请求时），而在客户端称为一次。

Nuxt.js您提供了不同的使用方式asyncData：

返回promise，Nuxt.js将在渲染组件之前等待承诺被解决。
使用异步/等待（下面使用的方法）
显示数据：asyncData的结果将与数据合并。我们可以像过去那样在模板中显示数据：

<template>
  <h1>{{ title }}</h1>
</template>

<template>
  <div class="page">
    Page is search
    <ul>
      <li v-for="(item,idx) in $store.state.navbar.app" :key="idx">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  layout: 'search',
  data() {
    return {
      list: []
    }
  },
  async asyncData() {
    let {status, data: {list}} = await axios.get('http://localhost:3000/city/list')
    if (status === 200) {
      return {
        list
      }
    }
  }
}
</script>

<style lang="css">
</style>

以上就是Nuxt.js的基础示例，想要更深入的了解可以查看官网文档：https://nuxtjs.org/