[TOC]

Loading

nuxt.config.js

export default {
  loading: false, // 关闭loading
  loading: {continuous: true}, // 设置连续的
  loading: { // 设置样式
    color: 'blue',
    height: '5px'
  }
}

局部设置 loading

<template>
  <h1>My page

</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>

// 通过代码控制loading
export default {
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 500)
    })
  }
}

使用自定义加载组件

自定义loading

元标签和搜索引擎优化

Nuxt.js 为您提供了 3 种不同的方式来向您的应用程序添加元数据：

  1. 全局使用 nuxt.config.js
  2. 局部使用头部作为对象
  3. 在本地使用 head 作为函数，以便您可以访问数据和计算属性。


全局设置

Nuxt.js 允许您使用 head 属性在 nuxt.config.js 文件中为您的应用程序定义所有默认标签。这对于为 SEO 目的添加默认标题和描述标签或设置视口或添加网站图标非常有用。
nuxt.config.js

export default {
  head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  }
}

本地设置

您还可以使用每个页面上head脚本标记内的方法为每个页面添加标题和元数据。
pages/index.vue

<script>
export default {
  head: {
    title: 'Home page',
    meta: [
      {
        hid: 'description',
        name: 'description',
        content: 'Home page description'
      }
    ],
  }
}
</script>

--| user/
-----| index.vue
-----| one.vue
--| index.vue

页面

<template>
  <h1>{{ title }}</h1>
</template>
<script>
  export default {
    data() {
      return {
        title: 'Home page'
      }
    },
    computed: {
      alternate () {
        let url = 'https://www.baidu.com/'
        if (this.$store.state.url) {
          url = this.$store.state.url
        }
        return {
          url
        }
      },
    },
    head() {
      // 注意：在server client都会执行
      // 动态值结合 computed 使用
      return {
        title: this.title,
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ],
        script: [
          {
            src:
              'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
          }
        ],
        link: [
          { rel: 'canonical', href: this.alternate.url }
          {
            rel: 'stylesheet',
            href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
          }
        ]
      }
    }
  }
</script>

Nuxt.js 使用vue-meta更新应用程序的文档头和元属性。

外部资源

// nuxt.config.js
export default {
  head: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
      }
    ],
    link: [
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Roboto&display=swap'
      }
    ]
  }
}

Vue Mate

{
  metaInfo: {
    script: [{
      type: 'application/ld+json',
      json: {
        '@context': 'http://schema.org',
        unsafe: '<p>hello</p>'
      }
    }]
  }
}
<script type="application/ld+json">
  { "@context": "http://schema.org", "unsafe": "&lt;p&gt;hello&lt;/p&gt;" }
</script>

{
  metaInfo: {
    script: [{
      vmid: 'ldjson-schema',
      innerHTML: '{ "@context": "http://schema.org" }',
      type: 'application/ld+json'
    }],
    __dangerouslyDisableSanitizersByTagID: {
      'ldjson-schema': ['innerHTML']
    },
  }
}
<script type="application/ld+json">{ "@context": "http://schema.org" }</script>


配置

css 属性

Nuxt.js 允许您定义要全局设置的 CSS 文件/模块/库（包含在每个页面中）。

// nuxt.config.js
export default {
  css: [
    // Load a Node.js module directly (here it's a Sass file)
    'bulma',
    // CSS file in the project
    '~/assets/css/main.css',
    // SCSS file in the project
    '~/assets/css/main.scss'
    // 注意，不写扩展名将按照['css', 'pcss', 'postcss', 'styl', 'stylus', 'scss', 'sass', 'less'] 顺序读取 命中即返回。
    '~/assets/css/main', '~/assets/css/animations'
  ]
}

Pre-processors

<template lang="pug"> h1.red Hello {{ name }}! </template>

<style lang="scss">
  .red {
    color: red;
  }
</style>

yarn add -D pug pug-plain-loader
yarn add -D sass sass-loader@10 fibers

PostCSS plugins

如果存在，请重命名或删除项目目录中的postss.config.js。然后，在nuxt.config.js文件中添加以下内容：

export default {
  build: {
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      plugins: {
        // Disable a plugin by passing false as value
        'postcss-url': false,
        'postcss-nested': {},
        'postcss-responsive-type': {},
        'postcss-hexrgba': {}
      },
      preset: {
        // Change the postcss-preset-env settings
        autoprefixer: {
          grid: true
        }
      }
    }
  }
}

jsx

Nuxt.js 使用 @nuxt/babel-preset-app，它基于官方的 @vue/babel-preset-app 为 babel 默认配置，所以你可以在你的组件中使用 JSX。
您还可以在render 组件的方法中使用 JSX ：

<script>
export default {
  data () {
    return { name: 'World' }
  },
  render (h) {
    return <h1 class="red">{this.name}</h1>
  }
}
</script>

如果您使用的