Nuxt.js + koa2 入門

1. nuxt項目初始化

• 下面是使用 koa 模板方法初始化一個項目，使用該方法須要將 nuxt 的版本降至1.4.2；
• 官方 https://zh.nuxtjs.org/guide/installation 還要提供了腳手架工具，可用使用最新的nuxt2.0版本初始化一個項目。

$ vue init nuxt-community/koa-template <project-name>
$ cd <project-name>
$ npm run dev

<!--
    1. 若是有報錯： Plugin/Preset files are not allowed to export objects, only functions
        須要下降nuxt版本至1.4.2：
        npm uninstall nuxt
        npm install nuxt@1.4.2
        
    2.  升級eslint-plugin-html 
        $ npm i eslint-plugin-html@^3
-->

2. 新建路由

(建立即配置)在pages目錄中新建一個vue文件，即成功建立了路由，文件名也就是路由名稱。

3. 模板文件

layouts 目錄下的全部文件都屬於個性化佈局文件，能夠在頁面組件中利用 layout 屬性來引用。
請確保在佈局文件裏面增長 組件用於顯示頁面非佈局內容。
舉個例子：

新建：layouts/search-layout.vue:

<template>
  <div>
    <h1>search page</h1>
    <nuxt/>
    <footer>這是一個自定義的只用於search的模板</footer>
  </div>
</template>
<script>
export default {
}
</script>

在 pages/search.vue 裏， 能夠指定頁面組件使用 search-layout 佈局。

<template>
  <div>
    <h2>search page</h2>
  </div>
</template>
<script>
export default {
  layout: 'search-layout'
}
</script>

4. 全局配置文件：nuxt.config.js

這裏面定義了全部頁面的head title 和main.css 。。。等

5. 接口路由配置

5.1 在server目錄新建interface/city.js

import Router from 'koa-router'

const router = new Router({
  prefix: '/city'
})
router.get('/list', async (ctx) => {
  ctx.body = {
    list: ['北京', '上海', '菏澤']
  }
})

export default router

5.2 在server/index.js中引入新建路由

import Koa from 'koa'
import { Nuxt, Builder } from 'nuxt'

// 引入新建接口路由
import cityInterface from './interface/city'

// 使用新建接口路由
app.use(cityInterface.routes()).use(cityInterface.allowedMethods())

訪問：http://localhost:3000/city/list 驗證是否成功

5.3 重新建接口中獲取數據

<template>
  <div>
    <h2>search page</h2>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  layout: 'search-layout',
  data() {
    return {
      list: ['11', '22', '33']
    }
  },
  async mounted() {
    let res = await axios.get('/city/list')
    console.log(res)
    this.list = res.data.list
  }
}
</script>

---

參考

• https://github.com/nuxt-community/koa-template
• https://zh.nuxtjs.org/guide/async-data
• https://www.jianshu.com/p/840169ba92e6