美文网首页
1 简单使用nuxt

1 简单使用nuxt

作者: wncbbnk | 来源:发表于2018-03-02 16:29 被阅读0次

    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' } }

    相关文章

      网友评论

          本文标题：1 简单使用nuxt

          本文链接：https://www.haomeiwen.com/subject/hdiaxftx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|1 简单使用nuxt|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！