nuxt-部分组件详解

这篇文章整理一下，nuxt中 pages/layout/components/plugins 的相关使用 。之前已经手上使用过了，这次详细的看一下官方文档，加深理解。
目录结构

|--src
  |--components      ---编写重复使用组件。
  |--layout          ---编写全局样式。
  |--pages           ---编写具体页面。
  |--plugins         ---编写需要的插件。

components

该components目录包含您的 Vue.js 组件。组件构成了页面的不同部分，可以重复使用并导入到页面、布局甚至其他组件中。
通过在 nuxt.config.js 文件中进行如下配置，可以直接使用组件，无需导入

export default {
  components: true
}

|-- components/
  |-- TheHeader.vue
  |-- TheFooter.vue

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>

引用时，需要与文件名相同。
当components 层级较多时的引用方法：

|--components
  |--base
      |--foo
         |--CustomButton.vue

组件名称将基于其自己的路径目录和文件名。因此，该组件将是

<BaseFooCustomButton />

获取数据
components 获取数据的方式是： Nuxt中的 fetch() 。无法使用asyncData，因为asyncData方法会在组件（限于页面组件）每次加载之前被调用。

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

注意：无法在内部使用this获取组件实例，fetch是在组件初始化之前被调用

layout

编写全局布局，例如，侧边栏，导航栏。

|-- layout
  |-- default.vue

default.vue 文件，会默认应用到所有未指定布局的页面。
引用导航栏，页脚组件：

<template>
  <div>
    <TheHeader />
    <Nuxt />
    <TheFooter />
  </div>
</template>

也可以自定义导入需要的布局：

// X.vue
<script>
export default {
  layout: 'blog',
  // OR
  layout (context) {
    return 'blog'
  }
}
</script>

layout有个特殊的页面——error 。虽然这个文件放在 layouts 文件夹中，但它应该被视为一个页面。

<template>
  <div class="container">
    <h1 v-if="error.statusCode === 404">!!!!!!!!!!!!!!啊呀，页面找不到了</h1>
    <h1 v-else>An error occurred</h1>
    <h2>这是 error.message  {{error.message}}</h2>

    <h2>这是 error.statusCode  {{error.statusCode}}</h2>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
export default {
  layout: 'errorLayout',
  props: ['error'] // you can set a custom layout for the error page
}
</script>

接收 error 参数。在全局的api 接口调用， 处理错误信息。

export default function ({ app, $axios, error},inject) {
  const API = {};
  API.getGameList = function () {
    return $axios.$get('/api/apps.json').catch(e => {
      error({ statusCode: e.response.status, message: e.response.statusText })
    })
  };
  app.api = API;
  inject('api',API);
}

这样，就能捕获接口异常信息，跳转到 error 页面。

pages

page包含所有的目录和路由。nuxt 会根据文件名自动生成路由，也可根据接收的参数生成动态页面，接收的参数以下划线开头。如：_slug

|-- pages
  |-- _slug
    |--index.vue
  |-- game
    |--index.vue

<nuxt-link
:to="{ name: 'slug', params: { slug: item.slug } }"
>
</nuxt-link>

<nuxt-link :to="/game" >
</nuxt-link>

_slug/index.vue 文件接收参数

<template>
  <h1>{{ this.slug }}</h1>
</template>

<script>
  export default {
    async asyncData({ params }) {
      const slug = params.slug // When calling /abc the slug will be "abc"
      return { slug }
    }
  }
</script>

page 获取数据的方法：

asyncData. 这个钩子只能放在页面组件上。与 不同的是fetch，此钩子在客户端渲染期间不会显示加载占位符：相反，此钩子会阻止路由导航，直到解决为止，如果失败则显示页面错误。
fetch（Nuxt 2.12+）。这个钩子可以放在任何组件上，并提供渲染加载状态（在客户端渲染期间）和错误的快捷方式。
在 fetch 里可以使用 this。 this的数据，需要先在data中定义。

export default {
  asyncData(context){
    const tempParams = context.params;
    return { tempParams }
  },
  data() {
    return {
      iframeShow: false
    }
  },
  async fetch( { params } ) {
    this.iframeShow = await params.iframeShow;
  }
}

page 其他配置
-- 文档 head 信息,
-- layout布局，
-- 加载 loading ，
-- 路由过渡动画 transition，
-- 中间件 middleware：定义此页面的中间件。中间件将在呈现页面之前被调用。
-- 滚到顶部 scrollToTop，
-- 监听字符串变化watchQuery：可以设置查询字符串的监视程序，
如：watchQuery:['sq'],
<nuxt-link to="/test/abc?sq=1">test</nuxt-link> 将会监听到sq 的变化，将调用所有组件方法（asyncData，fetch（context），validate，layout等）。监视默认情况下处于禁用状态，以提高性能。如果要为所有查询字符串设置监视程序，请设置watchQuery: true。
-- key：key属性赋值到 <router-view :key="$route.path" />，这对于在动态页面和不同路径中进行转换很有用。不同的key会使页面组件重新渲染。
-- 配置 Configuration： 可以重命名当前page的名字
-- 忽略页面 Ignoring pages，
在文件名前面添加 '-' ，如：pages/-about.vue ，如果您想忽略页面以便它们不包含在生成的 router.js 文件中，那么您可以通过在它们前面加上 - 来忽略它们。 about.vue 将被忽略。

export default {
  middleware: 'auth'
  layout: 'gamePlay',
  head() {
    return {
      title: `New head`,
    }
  },
  loading: false,
  transition: 'fade',
  scrollToTop: true,
  watchQuery: ['sq'],
  key (route) {
    return route.fullPath
  },
  dir: {
    // Rename `pages` directory to `routes`
    pages: 'routes'
  }
}

plugins
该目录文件，包含想要在vue.js实例化之前的所有js 插件。
例如，elementUI引用，之前介绍的 axios 封装，国际化文件。
最重要的是，需要在 nuxt.config.js 里配置你需要使用的插件。

module.exports = {
   modules: ['@nuxtjs/axios'],
   plugins: [
      '~/plugins/element-ui',
      '~/plugins/api',
      { src: '~plugins/vueLazyLoad', ssr: false },
      '~/plugins/gtag',
      '~/plugins/global',
      '~/plugins/i18n'
    ],
}

最后，就可以直接在具体的页面中使用了。

---

附带一张nuxt 声明周期图

出处：nuxt的生命周期
以上就是我整理的 pages/layout/components/plugins 相关内容了。如有不足之处，希望各位能多多指教。