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
Nuxt.js + koa2 入门的更多相关文章
- Nuxt.js 基础入门教程
原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只 ...
- Nuxt.js 从入门到放弃
Nuxt 是 Vue 上的 SSR,也就是服务端渲染应用框架,可在很大程度上解决当前 SPA 和 CSR 的首页加载慢,不利于 SEO 的问题.本场 Chat 就将详细介绍 Nuxt 的使用以及相关概 ...
- Nuxt.js的踩坑指南(常见问题汇总)
本文会不定期更新在nuxt.js中遇到的问题进行汇总.转发请注明出处,尊重作者,谢谢! 强烈推荐作者文档版踩坑指南,点击跳转踩坑指南 在Nuxt的官方文档中,中文文档和英文文档都存在着不小的差异. 1 ...
- 使用nuxt.js官方脚手架构建koa2的es6编译问题
最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编 ...
- Nuxt.js开启SSR渲染快速入门
第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多 ...
- Nuxt.js入门学习
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用, ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js
前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...
- 使用nuxt.js官方脚手架构建项目时ES6编译问题SyntaxError: Unexpected token import
用nuxt集成koa2做vue后台,官方自带脚手架搭建的koa2仍是ES5语法,在构建koa2时默认的nodemon是没有使用babel编译的, 所以首先需要在启动命令后加上--exec babel- ...
- Nuxt.js vue服务端渲染
一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...
随机推荐
- 10款jQuery文本高亮插件
[编者按]本文作者为 Julian Motz,主要介绍十款 jQuery 文本高亮插件的现状.文章系国内 ITOM 管理平台 OneAPM 编译呈现. 很多应用或网站都为用户提供搜索关键词的方法.为了 ...
- Prometheus Node_exporter 之 Network Netstat TCP Linux MIPs
Network Netstat TCP Linux MIPs1. TCP Aborts / Tiemouts type: GraphUnit: shortLabel: ConnectionsTCPAb ...
- CREATE INDEX (Transact-SQL) 语法 (转载)
CREATE [ UNIQUE ] [ CLUSTERED | NONCLUSTERED ] INDEX index_name ON <object> ( column [ ASC | D ...
- vsftp配置
网上很多,但我还是想再整理一份属于自己的 1.vsftp简介 vsftp提供三种登陆方式:.匿名登录 .本地用户登录 .虚拟用户登录 vsftpd的特点:.较高的安全性需求 .带宽的限制 .创建支持虚 ...
- October 23rd, 2017 Week 43rd Monday
Champions have the courage to keep turning the pages because they know a better chapter lies ahead. ...
- 题解 P1550 【[USACO08OCT]打井Watering Hole】
题面(翻译有点问题,最后一句话) 农民John 决定将水引入到他的n(1<=n<=300)个牧场.他准备通过挖若 干井,并在各块田中修筑水道来连通各块田地以供水.在第i 号田中挖一口井需要 ...
- Beta阶段第四次冲刺
Beta阶段第四次冲刺 严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正在进 ...
- Python接口自动化--SSL 3
官方文档参考地址: https://urllib3.readthedocs.io/en/latest/advanced-usage.html#ssl-warnings 针对SSL Warnings,u ...
- bip44
BIP: Layer: Applications Title: Multi-Account Hierarchy for Deterministic Wallets Author: Marek Pala ...
- Python2.7-fnmacth
fnmatch 模块,提供了对 Unix shell 的规则的支持,类似正则,但不一样,匹配的规则只有3条:*, ?, 在 [] 里的任意字符 模块方法: fnmatch.fnmatch(filena ...