【Nuxt.js 极速指南】进阶篇

上接《【Nuxt.js 极速指南】基础篇》，这篇文章你将会学习到：

• 异步数据

• 资源文件

• 插件

• 命令

异步数据

Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。

asyncData 方法

asyncData 方法会在组件（限于页面组件）每次加载之前被调用。

Nuxt.js 提供了几种不同的方法来使用 asyncData 方法，你可以选择自己熟悉的一种来用：

• 返回 Promise

export default {
    asyncData ({ params }) {    return axios.get(`http://domain.com/${params.id}`)
        .then((res) => {        return { title: res.data.title }
        })
    }
}

• 使用 async或await

export default {    async asyncData ({ params }) {        let { data } = await axios.get(`http://domain.com/${params.id}`)        return { title: data.title }
    }
}

• 使用 回调函数

export default {
    data () {        return { project: 'default' }
    },
    asyncData (context) {        return { context: context }
    }
}

上下文

export default {
    data () {        return { project: 'default' }
    },
    asyncData (context) {        return { project: 'nuxt' }
    }
}

资源文件

默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件，可以放置在 static 目录中。

静态文件

如果你的静态资源文件需要 Webpack 做构建编译处理，可以放到 assets 目录，否则可以放到 static 目录中去。

插件

Nuxt.js 可以在实例化 Vue 程序之前，运行 js 插件：

第三方模块

用常用的 axios 插件为例：

安装：

yarn add axios

配置 nuxt.config.js：

module.exports = {
    modules: [        '@nuxtjs/axios'
    ]
    axios: {
        proxy: true,
        debug: false,
        browserBaseURL: '/',
        retry: { retries: 3 }
    }
}

使用：

<template>
  <h1>{{ title }}</h1></template><script>import axios from 'axios'export default {  async asyncData ({ params }) {    let { data } = await axios.get(`https://my-api/posts/${params.id}`)    return { title: data.title }
  }
}</script>

Vue 插件

编写插件 plugins/vue-demo.js：

import Vue from 'vue';

VueDemo = ...

Vue.use(VueDemo)

配置 nuxt.config.js：

module.exports = {
  plugins: ['~/plugins/vue-demo']
}

命令

• nuxt ：启动一个热加载的Web服务器（开发模式）；

• nuxt build ：利用webpack编译应用，压缩JS和CSS资源（发布用）；

• nuxt start ：以生产模式启动一个Web服务器；

• nuxt generate ：编译应用，并依据路由配置生成对应的HTML文件（用于静态站点的部署）。

〖坚持的一俢〗