这篇文章整顿一下，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 相干内容了。如有不足之处，心愿各位能多多指教。