1. nuxt项目初始化
- 下面是使用 koa 模板方法初始化一个项目,使用该方法需要将 nuxt 的版本降至1.4.2;
- 官方 https://zh.nuxtjs.org/guide/installation 还要提供了脚手架工具,可用使用最新的nuxt2.0版本初始化一个项目。
$ vue init nuxt-community/koa-template
$ cd
$ npm run dev
2. 新建路由
(创建即配置)在pages目录中新建一个vue文件,即成功创建了路由,文件名也就是路由名称。
3. 模板文件
layouts 目录下的所有文件都属于个性化布局文件,可以在页面组件中利用 layout 属性来引用。
请确保在布局文件里面增加 组件用于显示页面非布局内容。
举个例子:
新建:layouts/search-layout.vue:
search page
在 pages/search.vue 里, 可以指定页面组件使用 search-layout 布局。
search page
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 从新建接口中获取数据
search page
-
{{item}}
参考
- https://github.com/nuxt-community/koa-template
- https://zh.nuxtjs.org/guide/async-data
- https://www.jianshu.com/p/840169ba92e6