上接《【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文件(用于静态站点的部署)。
〖坚持的一俢〗
网友评论