1. cookie-universal-nuxt

• 1.1

npm i cookie-universal-nuxt --save

• 1.2 nuxt.config.js 中引入

modules: [
  'cookie-universal-nuxt'
],

1.3 安装完 cookie-universal-nuxt 后，上下文 context 中会多出一个$cookies

async asyncData ({ $axios, $cookies }) {
    console.log($cookies.get('name'), '$cookies') // value111111111
},

2. 路由防卫资料

2.1：中间件防卫 https://iiong.com/nuxtjs-use-note/

2.2：路由防卫 http://www.fly63.com/article/detial/7

2.3：组件路由防卫（推荐） http://element-ui.cn/article/show-79630.aspx

3. 加载公共组件

import _kebabCase from 'lodash/kebabCase'
const REG_EXT = /(.vue|.js)$/
const REG_INDEX = /\/(index.vue|index.js)$/

export default {
  install(Vue) {
    const useComponents = context => {
      context.keys().map(key => {
        const component = context(key).default || context(key)
        const name =
          component.name ||
          _kebabCase(key.replace(REG_INDEX, '').replace(REG_EXT, ''))
        return Vue.component(name, component)
      })
    }

    const context = require.context('../components/base', true, /(.vue|.js)$/)
    useComponents(context)
  }
}

使用方法： components/base

1. base 下面文可以是单个文件或者文件夹形式
2. 命名大写字母开头 或者 - 如：Banner(文件夹名称）、login.vue、Login.vue
3. 说明：文件夹下的 Banner .vue 会自动挂载

4. next 中上拉加载更多

<template>
  <div>
    <div class="infinite-list-wrapper">
      <ul
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="busy"
        infinite-scroll-distance="30"
      >
        <li v-for="i in list" :id="i.aid" :key="i.aid" class="list-item">
          {{ i.aid }}
        </li>
      </ul>
    </div>

    <div class="foot">底部</div>
  </div>
</template>

<script>
import _uniqBy from 'lodash/uniqBy'
export default {
  /* async asyncData ({ $axios }) {
    const [list] = await Promise.all([
      $axios.get('/api/appapi.php?a=getPortalList&catid=20&page=1')
    ])
    return {
      list: list.result || []
    }
  }, */
  data() {
    return {
      busy: false,
      page: 1,
      list: []
    }
  },
  methods: {
    async loadMore() {
      // 如果是第一页，就终止请求，这个只有第一页数据是ssr才使用
      // if (this.page === 1) {
      //   this.page = 2
      //   return false
      // }

      const res = await this.$axios.get(
        'http://www.phonegap100.com/appapi.php?a=getPortalList',
        {
          params: {
            catid: 20,
            page: this.page
          }
        }
      )
      if (res) {
        console.log(res, '===')
        ++this.page
        this.list = _uniqBy(this.list.concat(res.result), 'aid')
        if (res.result.length < 20 && this.page !== 1) {
          this.busy = true
          console.log('没有数据了')
          alert('没有数据了')
        }
      }
    }
  }
}
</script>
<style scoped>
.infinite-list-wrapper {
  /* width: 1300px; */
  margin: 0 auto;
}
ul {
  margin: 0 40px;
}
li {
  height: 42px;
}
.foot {
  background: #ccc;
  height: 150px;
}
</style>

5. nuxt 中使用 vue-video-player

https://www.cnblogs.com/sq-blogs/p/nuxt-video.html 原文地址

• 5.1 mian.js 中引入

import Vue from 'vue'
import 'vue-video-player/src/custom-theme.css'

import Video from 'video.js'
import 'video.js/dist/video-js.css'

const VueVideoPlayer = require('vue-video-player/dist/ssr')
const hls = require('videojs-contrib-hls')

Video.addLanguage('zh-CN')// 添加中文支持
Vue.use(hls)
Vue.use(VueVideoPlayer)

nuxt.config.js引入
{ src: '@/plugins/videoPlayer', mode: 'client' },

• 5.2 页面使用

<div
      v-video-player:myVideoPlayer="playerOptions"
      class="video-player-box"
      :playsinline="playsinline"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"
      @ended="onPlayerEnded($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @ready="playerReadied"
      @statechanged="playerStateChanged($event)"
    ></div>

 data () {
    return {
      playerOptions: {
        // 是否关闭音频
        muted: true,
        // 初始语言，默认为英语，code参见：https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry
        language: 'zh-CN',
        // 播放速度，指定后Video.js将显示一个控件(vjs-playback-rate类的控件)，允许用户从选项数组中选择播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，表示长宽比例
        // aspectRatio: '4:3',
        preload: 'auto',
        fluid: true,
        // 等同于原生<video>标签中的一组<source>子标签，可实现优雅降级；type 属性规定媒体资源的 MIME 类型，标准类型可参见：https://www.iana.org/assignments/media-types/media-types.xhtml；
        sources: [{
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: 'http://hls.videocc.net/ce0812b122/c/ce0812b1223bb292333a4ce6e092a949_3.m3u8'
        }],
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        notSupportedMessage: '无法播放，请稍后再试'
        // 在视频开始播放之前显示的图像的URL（封面），这通常是一个视频帧或自定义标题屏幕，一旦用户点击“播放”，图像就会消失。
        // poster: require('../assets/test.jpg'),
      }
    }
},
methods:{

}