NUXT.JS学习笔记

目录结构

├── assets // 资源文件。用于组织未编译的静态资源入LESS、SASS 或 JavaScript │ └── logo.jpg // 默认logo图片 ├── components // 组件。用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件 │ └── AppLogo.vue // 默认logo组件 ├── layouts // 布局。页面都需要有一个布局，默认为 default。它规定了一个页面如何布局页面。所有页面都会加载在布局页面中的 标签中。 │ └── default.vue // 默认模板页面，类似mvc中的layout ├── middleware // 中间件。存放中间件。可以在页面中调用： middleware: ‘middlewareName’ 。 ├── pages 　 // 页面。一个 vue 文件即为一个页面。 │ └── index.vue // 默认首页面 ├── plugins // 用于存放JavaScript插件的地方 │ └── element-ui.js // 上边我们安装的UI框架 ├── static // 用于存放静态资源文件，比如图片，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。 ├── store 　 // 用于组织应用的Vuex 状态管理。 ├── .editorconfig // 开发工具格式配置 ├── .eslintrc.js // ESLint的配置文件，用于检查代码格式 ├── .gitignore // 配置git不上传的文件 ├── nuxt.config.js // 用于组织Nuxt.js应用的个性化配置，比如网站title，已便覆盖默认配置 ├── package.json // npm包管理配置文件 └── README.md // 说明文档

创建项目

$ vue init nuxt-community/starter-template <project-name> $ cd <project-name> $ npm install $ npm run dev

asyncData

asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的，所以，请求数据时，不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象。

请求方式一：

asyncData ({ params }) {//请求 return axios({ method: 'get', url: '后台api接口' }) .then(function (response) { return { posts: response.data.slice(0, 5) } }) }

请求方式二：

async asyncData ({ params }) { let { data } = await axios({ method: 'get', url: '后台api接口' }) return { posts: data.slice(0, 5) } }

问题：由于asyncData方法是在组件初始化 前被调用的，只能在首次重新加载的时候调用，如果遇到了分页，当页码改变的时候不能做服务端的调用。 解决方案：

nuxt的官方文档中提供了watchQuery属性可以监听参数字符串的更改。 如果定义的字符串发生变化，将调用所有组件方法(asyncData, fetch, validate, layout, …)。 为了提高性能，默认情况下禁用。 如果您要为所有参数字符串设置监听， 请设置： watchQuery: true.

watchQuery的使用方法： 如果要全局使用watchQuery，那就在nuxt.config.js中全局配置

module.exports = { watchQuery: true } // 分页点击事件的方法 pageChange (page) { this.currentPage = page //在页码改变的时候要将参数以query的形式传到路径上 this.$router.push({ path:'/template', query:{ page:page } }) }

middleware 中间件

所谓中间件，就是在页面与页面跳转中执行的函数方法。如页面跳转时验证用户信息操作。 中间件可以使您的自定义的函数在渲染页面之前运行

// 列如在middleware目录中创建baseurl.js文件来定义中间件函数 import axios from 'axios' export default function ({ route, store, redirect }) { if (store.state) { alert('抱歉您没有token，请先登录') return redirect('/search') } } // 之后在nuxt-config.js中配置，之后就可以在每一个页面中使用 router: { middleware: 'baseurl' // 是js文件名字 } // 但是如果不想在每一个页面中使用，可以在需要的页面中指定 // 指定中间件函数 middleware: 'baseurl', export default function({ store, route, redirect, $axios, error }) { // 根据后台返回的自定义错误码进行拦截 $axios.onResponse(res => { const code = res.data.code if (code === 500) { return Promise.reject() } if (code === 404) { return error ({ statusCode: 404 }) } }) // 错误请求拦截跳转错误页面 $axios.onError(() => { return error ({ statusCode: 500 }) }) }

fetch 方法

fetch 方法用于在渲染页面前填充应用的状态树（store）数据， 与 asyncData 方法类似，不同的是它不会设置组件的数据。

一：

export default { fetch ({ store, params }) { return axios.get('http://my-api/stars') .then((res) => { store.commit('setStars', res.data) }) } }

二：

export default { async fetch ({ store, params }) { let { data } = await axios.get('http://my-api/stars') store.commit('setStars', data) } }

header方法

使用 head 方法设置当前页面的头部标签。在 head 方法里可通过 this 关键字来获取组件的数据，你可以利用页面组件的数据来设置个性化的 meta 标签。

<template> <h1>{{ title }}</h1> </template> <script> export default { data () { return { title: 'Hello World!' } }, head () { return { title: this.title, meta: [ { hid: 'description', name: 'description', content: 'My custom description' } ] } } } </script>

注意：为了避免子组件中的meta标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为meta标签配一个唯一的标识编号。请阅读关于 vue-meta 的更多信息。

过滤器的使用

1：在plugins新建一个filters.js

import Vue from 'vue' // 时间格式化 export function formatDate (date, fmt) { let newDate = new Date(date) if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (newDate.getFullYear() + '').substr(4 - RegExp.$1.length)) } let o = { 'M+': newDate.getMonth() + 1, 'd+': newDate.getDate(), 'h+': newDate.getHours(), 'm+': newDate.getMinutes(), 's+': newDate.getSeconds() } for (let k in o) { if (new RegExp(`(${k})`).test(fmt)) { let str = o[k] + '' fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str)) } } return fmt } let filters = { formatDate } Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) export default filters

2：然后在nuxt.config.js中注册

plugins: [ '~plugins/filters.js' ]

3：在组件中使用

<!-- 时间格式化 --> <div> <span>{{date | formatDate('yyyy-MM-dd')}}</span> </div>