入门Nuxt（内含github项目地址）

服务端渲染我们也叫ssr，通常用来优化seo、首屏渲染等等。这里我们主要讲一讲我所了解的nuxt形态，怎么初始化和简单构建一个nuxt项目。

1. nuxt 从0开始新建一个项目

(这段源自于官方文档，文档里也有项目模板生成器，用于学习我更推荐这种方式)

 mkdir nuxt-demo
 cd nuxt-hello
 yarn add nuxt

新建一个pages文件夹

 mkdir pages

在pages里新建一个index.vue

<template>
  <div>
    <h1>Hello nuxt!</h1>
    <h2>This is {{page}}</h2>
  </div>
</template>
<script>
export default {
  data () {
    return {
      page: 'ssr'
    }
  }
}
</script>

修改package.json

{ 
  "scripts": {
    "dev": "nuxt"
  },
  "dependencies": {
    "nuxt": "^2.10.2"
  }
}

运行

yarn dev

hello nuxt.png

看一下源码，我们发现是有的，说明成功了

view-souce localhost3000.png

2. nuxt 之异步渲染（nuxt-ssr核心功能）

举一个常见的业务例子，假如我们有一个产品的详情页面，通常非ssr的做法是，当用户访问一个 product.html?id=1的页面，前端获取id这个参数，通过api请求获取内容然后通过vue渲染出来展示给用户。
而我们要实现服务端渲染，就需要将这个请求过程放在服务端了，而nuxt提供一个服务端的钩子函数：asyncData，如果说mounted是客户端的初始化函数，那么asyncData你可以理解为nuxt.js在服务端执行的生命周期函数，具体实现我们直接上代码。

在pages下，新建一个product.vue文件

<template>
  <div>
    <h2>{{product.id}}</h2>
    <h3>{{product.title}}</h3>
  </div>
</template>
<script>

// 我们这里模拟一个异步请求
function mockApi (id) {
  return new Promise((r, j) => {
    setTimeout(() => {
      r({
        id: id,
        title: `这是一个产品:${id}`
      })
    }, 500)
  })
}

export default {
  async asyncData ({query}) {
    let id = query.id
    let rs = await mockApi(id)
    return {
      product: rs
    }
  }
}
</script>

访问localhost:3000/product?id=2, 可以看到成功了，看一下源码，也是可以看到成功了的，一个简单的服务端渲染流程就走通了。nuxt还提供了一些其他的钩子函数，中间件等，可以参考官方api进一步学习。

3. 伪静态路由怎么设置（也可以叫做restful风格）

啥叫伪静态路由？比如刚才我们的访问地址是localhost:3000/product?id=2, 如何变成类似localhost:3000/product/2 这样也可以正常访问呢？

3.1 方案一，使用nuxt提供的动态路由功能实现

在pages里新建products文件夹，在里面新建_id.vue(nuxt会识别带下划线的文件，作为动态路由)
修改_id.vue：将product.vue的代码复制过来，修改asyncData函数

  async asyncData ({params}) {
    let id = params.id
    let rs = await mockApi(id)
    return {
      product: rs
    }
  }

实际就是替换query为param
然后访问 http://localhost:3000/products/2 测试一下

3.2 方案二，使用extendRoutes实现

当我们觉得方案一这种方式太傻瓜（或者说名字命名太别扭），也可以在根目录pages_extend文件夹, 新增一个product_pro.vue
将_id.vue的代码复制过来

然后在根目录新建nuxt.config.js

module.exports = {
  router: {
    extendRoutes (routes, resolve) {
      routes.push({
        name: 'product_pro',
        path: '/product_pro/:id',
        component: resolve(__dirname, 'pages_extend/product_pro.vue')
      })
    },
  },
}

然后访问 http://localhost:3000/product_pro/2 测试一下

4.nuxt的客户端跨域配置 (这个部分github项目里暂无demo示例)

由于nuxt是同构代码，编写热更新代码的时候，实际上会在客户端执行asyncData，虽然服务端渲染执行的请求不存在跨域，但前端执行时存在。所以我们需要在nuxt的nuxt.config.js里配置代理，这里以axois为例，步骤如下。

安装两个依赖

yarn add @nuxtjs/axios @nuxtjs/proxy --dev

修改nuxt.config.js

 // nuxt.config.js
module.exports = {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      // 需要代理的接口host
      target: 'https://api.mock.com',
      pathRewrite: {
        '^/api' : '/'
      }
    }
  }
}

vue 文件

export default {
  async asyncData ({$axios}) {
    // 假设接口地址为 https://api.mock.com/get/product,  由于我们配置了代理，那么url直接/api/get/product
    let res = await $axios.get('/api/get/product')
    return res
  }
}

这里特别注意的是axoios必须用 asyncData 的参数里取的$axios实例，否则是代理不了的。

结语

以上，是一个基础的nuxt跑通的流程，对于第一次接触nuxt的开发者来说, 目的是使得你对nuxt有一个较为直接的认识，真正项目当中，可能还涉及到cookie的处理、vuex、以及中间件的处理等。整体感觉nuxt就是一个介于接口和纯spa之间的一个中间层工具，上手还是非常简单的。

demo github地址：https://github.com/hjdshu/nuxt-demo
另附上服务器部署的教程：https://www.jianshu.com/p/b4b185370ad3