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>