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>

参考

Nuxt.js + koa2 入门的更多相关文章

  1. Nuxt.js 基础入门教程

    原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只 ...

  2. Nuxt.js 从入门到放弃

    Nuxt 是 Vue 上的 SSR,也就是服务端渲染应用框架,可在很大程度上解决当前 SPA 和 CSR 的首页加载慢,不利于 SEO 的问题.本场 Chat 就将详细介绍 Nuxt 的使用以及相关概 ...

  3. Nuxt.js的踩坑指南(常见问题汇总)

    本文会不定期更新在nuxt.js中遇到的问题进行汇总.转发请注明出处,尊重作者,谢谢! 强烈推荐作者文档版踩坑指南,点击跳转踩坑指南 在Nuxt的官方文档中,中文文档和英文文档都存在着不小的差异. 1 ...

  4. 使用nuxt.js官方脚手架构建koa2的es6编译问题

    最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编 ...

  5. Nuxt.js开启SSR渲染快速入门

    第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...

  6. Nuxt.js入门学习

    Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用, ...

  7. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

  8. 使用nuxt.js官方脚手架构建项目时ES6编译问题SyntaxError: Unexpected token import

    用nuxt集成koa2做vue后台,官方自带脚手架搭建的koa2仍是ES5语法,在构建koa2时默认的nodemon是没有使用babel编译的, 所以首先需要在启动命令后加上--exec babel- ...

  9. Nuxt.js vue服务端渲染

    一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...

随机推荐

  1. 10款jQuery文本高亮插件

    [编者按]本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 很多应用或网站都为用户提供搜索关键词的方法.为了 ...

  2. Prometheus Node_exporter 之 Network Netstat TCP Linux MIPs

    Network Netstat TCP Linux MIPs1. TCP Aborts / Tiemouts type: GraphUnit: shortLabel: ConnectionsTCPAb ...

  3. CREATE INDEX (Transact-SQL) 语法 (转载)

    CREATE [ UNIQUE ] [ CLUSTERED | NONCLUSTERED ] INDEX index_name ON <object> ( column [ ASC | D ...

  4. vsftp配置

    网上很多,但我还是想再整理一份属于自己的 1.vsftp简介 vsftp提供三种登陆方式:.匿名登录 .本地用户登录 .虚拟用户登录 vsftpd的特点:.较高的安全性需求 .带宽的限制 .创建支持虚 ...

  5. October 23rd, 2017 Week 43rd Monday

    Champions have the courage to keep turning the pages because they know a better chapter lies ahead. ...

  6. 题解 P1550 【[USACO08OCT]打井Watering Hole】

    题面(翻译有点问题,最后一句话) 农民John 决定将水引入到他的n(1<=n<=300)个牧场.他准备通过挖若 干井,并在各块田中修筑水道来连通各块田地以供水.在第i 号田中挖一口井需要 ...

  7. Beta阶段第四次冲刺

    Beta阶段第四次冲刺 严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正在进 ...

  8. Python接口自动化--SSL 3

    官方文档参考地址: https://urllib3.readthedocs.io/en/latest/advanced-usage.html#ssl-warnings 针对SSL Warnings,u ...

  9. bip44

    BIP: Layer: Applications Title: Multi-Account Hierarchy for Deterministic Wallets Author: Marek Pala ...

  10. Python2.7-fnmacth

    fnmatch 模块,提供了对 Unix shell 的规则的支持,类似正则,但不一样,匹配的规则只有3条:*, ?, 在 [] 里的任意字符 模块方法: fnmatch.fnmatch(filena ...