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>