nuxt知识点

1、nuxt.config.js
  * server: {
      port: '3000',//服务端口号
      host: '0.0.0.0'
    }
  * 全局的配置文件

2、layouts
  * 默认default，自定义组件不会省略index
  * 路由组件标签<nuxt/>
  * layout() {//使用自定义布局组件
      return '组件名'
    }
  * 错误页error,props:['error']

3、pages
  * layout({app, route, store, env, params, query}) {
      return '布局组件'
    }
  * asyncData({app, route, store, env, params, query}) {
    }
  * data()->created()
  * head() {
      return {
        title: '',
        meta: [],
        link: []
      }
    }
  * mounted()

4、plugins
  * Vue.prototype.$插件 = function () {//只能在客户端使用
    }
  * export default function (context, inject) {//只能在服务端使用
      context.app.$插件 = function () {
      }
    }
  * export default function (context, inject) {
      inject('插件', function () {
      })
    }
  * 自定义插件需在nuxt.config.js的plugins:[]中注册
    plugins:[
      '@/plugins/插件',//客户端服务端都能使用
      {src: '@/plugins/插件', mode: 'server'},//只能在服务端使用
      {src: '@/plugins/插件', mode: 'client'},//只能在客户端使用
    ]
  * 使用
    asyncData({app, route, store, env, params, query}) {
      app.$插件()
    }
    mounted() {
      this.$插件()
    }

5、@nuxtjs/axios
  * npm i -S @nuxtjs/axios
  * 在nuxt.config.js中注册
    modules: [
      '@nuxtjs/axios',
    ]
  * 使用
    asyncData({$axios, app, route, store, env, params, query}) {//方式一
      return $axios.$get('').then(res => {
        return {data: res.data}//返回值会和data()返回值合并
      })
    }
    async asyncData({$axios, app, route, store, env, params, query}) {//方式二
      let res = await $axios.$get('')
      return {data: res.data}//返回值会和data()返回值合并
    }
  * 配置nuxt.config.js跨域
    axios: {
      proxy: true,
      prefix: '/api'
    },
    proxy: {
      '/api': {
        target: '请求地址',
        pathRewrite: {'^/api': ''}
      }
    }
  * @nuxtjs/axios配置拦截器
    //plugins新建interceptor.js
    export default ({store, route, redirect, $axios}, inject) => {
      $axios.onRequest(config => {
        return config
      })
      $axios.onResponse(response => {
        return response
      })
      $axios.onError(error => {
      })
    }
    //nuxt.config.js中注册
    plugins: [
      '@/plugins/interceptor'
    ]

6、路由
  * 路由组件
    <NuxtLink to=''></NuxtLink>
    <Nuxt/>（一级路由）或<NuxtChild/>（嵌套路由）相当于<router-view/>
  * 路由生成案例（.nuxt目录下的router.js为生成的路由表）
    目录路径 -> 路由路径
    pages/index.vue -> /
    pages/aaa.vue -> /aaa
    pages/_aaa.vue（组件的name不能以_开头） -> /:aaa
      * 校验动态动态路由
        validate({params}) {
          return true//true：路由存在，false：路由不存在
        }
    pages/aaa/index.vue -> /aaa

7、middleware
  * export default ({store, redirect}) => {
      if (false) {
        redirect('/')
      }
    }
  * 在nuxt.config.js中注册
    router: {//每个路由都将执行此中间件
      middleware: '中间件文件名'
    }
  * 在组件中注册
    middleware: '中间件文件名'//加载此组件时执行此中间件
  * 生命周期
    middleware -> validate -> asyncData

8、store
  * state的值应该始终是function
  * 非index.js默认namespace: true

9、备注
  * nuxt判断客户端还是服务端
    process.client
  * nuxt服务端获取域名信息(协议://主机名.域名:端口号/前缀)
    process.env._AXIOS_BASE_URL_