1 简单使用nuxt

1. 安装

doc: https://zh.nuxtjs.org/

//最好用最新的node版本，以支持最新的语法特性
npm install -g vue-cli

vue init nuxt/starter <project-name>
cd <project-name>
npm install

npm run dev

如果用axios做异步数据请求，还要安装axios

npm install axios --save-dev

2. 使用

在pages目录里添加一个文件，test.vue.

<template>
  <h1>{{ title }}</h1>
</template>

<script>
//引入axios，还有很多比如superagent、needle等都可以。
import axios from 'axios';
export default {
  //这里采用async/await方式进行异步数据加载
  async asyncData(context){
    console.log(context);
    let {data}=await axios.get(`http://127.0.0.1:8002?message=${context.query.id}`);
    console.log(data);
    return {title: data.message};
  }
}
</script>

其中asyncData的参数为context(https://zh.nuxtjs.org/api#%E4%B8%8A%E4%B8%8B%E6%96%87%E5%AF%B9%E8%B1%A1)，如果只要query，也可以写成:

export default{
  async asyncData({query}){
    let {data}=await axios.get(`http://127.0.0.1:8002?message=${query.id}`);
  return {title, data.message}
  }
}

3. context自己打印了下自己的数据内容

{ isServer: [Getter],
  isClient: [Getter],
  isStatic: false,
  isDev: true,
  isHMR: false,
  app:
   { router:
      VueRouter {
        app: [Vue$3],
        apps: [Array],
        options: [Object],
        beforeHooks: [],
        resolveHooks: [],
        afterHooks: [],
        matcher: [Object],
        fallback: false,
        mode: 'abstract',
        history: [AbstractHistory] },
     nuxt:
      { defaultTransition: [Object],
        transitions: [Array],
        setTransitions: [Function: setTransitions],
        err: null,
        dateErr: null,
        error: [Function: error] },
     head:
      { title: 'test1',
        meta: [Array],
        link: [Array],
        style: [],
        script: [] },
     render: [Function: render],
     data: [Function: data],
     beforeCreate: [Function: beforeCreate],
     created: [Function: created],
     mounted: [Function: mounted],
     watch: { 'nuxt.err': 'errorChanged' },
     methods:
      { errorChanged: [Function: errorChanged],
        setLayout: [Function: setLayout],
        loadLayout: [Function: loadLayout] },
     components: { NuxtLoading: [Object] },
     context: [Circular] },
  payload: undefined,
  error: [Function: bound error],
  base: '/',
  env: {},
  req:
   IncomingMessage {
     _readableState:
      ReadableState {
        objectMode: false,
        highWaterMark: 16384,
        buffer: [BufferList],
        length: 0,
        pipes: null,
        pipesCount: 0,
        flowing: null,
        ended: true,
        endEmitted: false,
        reading: false,
        sync: true,
        needReadable: false,
        emittedReadable: true,
        readableListening: false,
        resumeScheduled: false,
        destroyed: false,
        defaultEncoding: 'utf8',
        awaitDrain: 0,
        readingMore: true,
        decoder: null,
        encoding: null },
     readable: true,
     _events: {},
     _eventsCount: 0,
     _maxListeners: undefined,
     socket:
      Socket {
        connecting: false,
        _hadError: false,
        _handle: [TCP],
        _parent: null,
        _host: null,
        _readableState: [ReadableState],
        readable: true,
        _events: [Object],
        _eventsCount: 10,
        _maxListeners: undefined,
        _writableState: [WritableState],
        writable: true,
        allowHalfOpen: true,
        _bytesDispatched: 0,
        _sockname: null,
        _pendingData: null,
        _pendingEncoding: '',
        server: [Server],
        _server: [Server],
        _idleTimeout: 120000,
        _idleNext: [Socket],
        _idlePrev: [TimersList],
        _idleStart: 6170607,
        _destroyed: false,
        parser: [HTTPParser],
        on: [Function: socketOnWrap],
        _paused: false,
        _peername: [Object],
        _httpMessage: [ServerResponse],
        [Symbol(asyncId)]: 42218,
        [Symbol(lastWriteQueueSize)]: 0,
        [Symbol(bytesRead)]: 0,
        [Symbol(asyncId)]: 42219,
        [Symbol(triggerAsyncId)]: 42218 },
     connection:
      Socket {
        connecting: false,
        _hadError: false,
        _handle: [TCP],
        _parent: null,
        _host: null,
        _readableState: [ReadableState],
        readable: true,
        _events: [Object],
        _eventsCount: 10,
        _maxListeners: undefined,
        _writableState: [WritableState],
        writable: true,
        allowHalfOpen: true,
        _bytesDispatched: 0,
        _sockname: null,
        _pendingData: null,
        _pendingEncoding: '',
        server: [Server],
        _server: [Server],
        _idleTimeout: 120000,
        _idleNext: [Socket],
        _idlePrev: [TimersList],
        _idleStart: 6170607,
        _destroyed: false,
        parser: [HTTPParser],
        on: [Function: socketOnWrap],
        _paused: false,
        _peername: [Object],
        _httpMessage: [ServerResponse],
        [Symbol(asyncId)]: 42218,
        [Symbol(lastWriteQueueSize)]: 0,
        [Symbol(bytesRead)]: 0,
        [Symbol(asyncId)]: 42219,
        [Symbol(triggerAsyncId)]: 42218 },
     httpVersionMajor: 1,
     httpVersionMinor: 1,
     httpVersion: '1.1',
     complete: true,
     headers:
      { host: '127.0.0.1:3000',
        connection: 'keep-alive',
        'upgrade-insecure-requests': '1',
        'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36',
        accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
        'accept-encoding': 'gzip, deflate, br',
        'accept-language': 'zh-CN,zh;q=0.9,en;q=0.8',
        cookie: 'a=b; c=d',
        'if-none-match': '"a53-3V9JYObNkQg1JKD2m66uXHxjsR8"' },
     rawHeaders:
      [ 'Host',
        '127.0.0.1:3000',
        'Connection',
        'keep-alive',
        'Upgrade-Insecure-Requests',
        '1',
        'User-Agent',
        'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36',
        'Accept',
        'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
        'Accept-Encoding',
        'gzip, deflate, br',
        'Accept-Language',
        'zh-CN,zh;q=0.9,en;q=0.8',
        'Cookie',
        'a=b; c=d',
        'If-None-Match',
        '"a53-3V9JYObNkQg1JKD2m66uXHxjsR8"' ],
     trailers: {},
     rawTrailers: [],
     upgrade: false,
     url: '/test?id=123',
     method: 'GET',
     statusCode: null,
     statusMessage: null,
     client:
      Socket {
        connecting: false,
        _hadError: false,
        _handle: [TCP],
        _parent: null,
        _host: null,
        _readableState: [ReadableState],
        readable: true,
        _events: [Object],
        _eventsCount: 10,
        _maxListeners: undefined,
        _writableState: [WritableState],
        writable: true,
        allowHalfOpen: true,
        _bytesDispatched: 0,
        _sockname: null,
        _pendingData: null,
        _pendingEncoding: '',
        server: [Server],
        _server: [Server],
        _idleTimeout: 120000,
        _idleNext: [Socket],
        _idlePrev: [TimersList],
        _idleStart: 6170607,
        _destroyed: false,
        parser: [HTTPParser],
        on: [Function: socketOnWrap],
        _paused: false,
        _peername: [Object],
        _httpMessage: [ServerResponse],
        [Symbol(asyncId)]: 42218,
        [Symbol(lastWriteQueueSize)]: 0,
        [Symbol(bytesRead)]: 0,
        [Symbol(asyncId)]: 42219,
        [Symbol(triggerAsyncId)]: 42218 },
     _consuming: false,
     _dumped: false,
     originalUrl: '/test?id=123',
     _parsedUrl:
      Url {
        protocol: null,
        slashes: null,
        auth: null,
        host: null,
        port: null,
        hostname: null,
        hash: null,
        search: '?id=123',
        query: 'id=123',
        pathname: '/test',
        path: '/test?id=123',
        href: '/test?id=123',
        _raw: '/test?id=123' },
     _parsedOriginalUrl:
      Url {
        protocol: null,
        slashes: null,
        auth: null,
        host: null,
        port: null,
        hostname: null,
        hash: null,
        search: '?id=123',
        query: 'id=123',
        pathname: '/test',
        path: '/test?id=123',
        href: '/test?id=123',
        _raw: '/test?id=123' } },
  res:
   ServerResponse {
     _events: { finish: [Function: bound resOnFinish] },
     _eventsCount: 1,
     _maxListeners: undefined,
     output: [],
     outputEncodings: [],
     outputCallbacks: [],
     outputSize: 0,
     writable: true,
     _last: false,
     upgrading: false,
     chunkedEncoding: false,
     shouldKeepAlive: true,
     useChunkedEncodingByDefault: true,
     sendDate: true,
     _removedConnection: false,
     _removedContLen: false,
     _removedTE: false,
     _contentLength: null,
     _hasBody: true,
     _trailer: '',
     finished: false,
     _headerSent: false,
     socket:
      Socket {
        connecting: false,
        _hadError: false,
        _handle: [TCP],
        _parent: null,
        _host: null,
        _readableState: [ReadableState],
        readable: true,
        _events: [Object],
        _eventsCount: 10,
        _maxListeners: undefined,
        _writableState: [WritableState],
        writable: true,
        allowHalfOpen: true,
        _bytesDispatched: 0,
        _sockname: null,
        _pendingData: null,
        _pendingEncoding: '',
        server: [Server],
        _server: [Server],
        _idleTimeout: 120000,
        _idleNext: [Socket],
        _idlePrev: [TimersList],
        _idleStart: 6170607,
        _destroyed: false,
        parser: [HTTPParser],
        on: [Function: socketOnWrap],
        _paused: false,
        _peername: [Object],
        _httpMessage: [Circular],
        [Symbol(asyncId)]: 42218,
        [Symbol(lastWriteQueueSize)]: 0,
        [Symbol(bytesRead)]: 0,
        [Symbol(asyncId)]: 42219,
        [Symbol(triggerAsyncId)]: 42218 },
     connection:
      Socket {
        connecting: false,
        _hadError: false,
        _handle: [TCP],
        _parent: null,
        _host: null,
        _readableState: [ReadableState],
        readable: true,
        _events: [Object],
        _eventsCount: 10,
        _maxListeners: undefined,
        _writableState: [WritableState],
        writable: true,
        allowHalfOpen: true,
        _bytesDispatched: 0,
        _sockname: null,
        _pendingData: null,
        _pendingEncoding: '',
        server: [Server],
        _server: [Server],
        _idleTimeout: 120000,
        _idleNext: [Socket],
        _idlePrev: [TimersList],
        _idleStart: 6170607,
        _destroyed: false,
        parser: [HTTPParser],
        on: [Function: socketOnWrap],
        _paused: false,
        _peername: [Object],
        _httpMessage: [Circular],
        [Symbol(asyncId)]: 42218,
        [Symbol(lastWriteQueueSize)]: 0,
        [Symbol(bytesRead)]: 0,
        [Symbol(asyncId)]: 42219,
        [Symbol(triggerAsyncId)]: 42218 },
     _header: null,
     _onPendingData: [Function: bound updateOutgoingData],
     _sent100: false,
     _expect_continue: false,
     statusCode: 200,
     [Symbol(isCorked)]: false,
     [Symbol(outHeadersKey)]: null },
  redirect: [Function],
  beforeNuxtRender: [Function],
  next: [Function],
  _redirected: false,
  _errored: false,
  route:
   { name: 'test',
     meta: [ {} ],
     path: '/test',
     hash: '',
     query: { id: '123' },
     params: {},
     fullPath: '/test?id=123',
     matched: [ [Object] ] },
  params: {},
  query: { id: '123' } }
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,392评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,258评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,417评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,992评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,930评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,199评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,652评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,327评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,463评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,382评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,432评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,118评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,704评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,787评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,999评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,476评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,057评论 2赞 341