Nuxt.js 加载方式

在本文中，我们将学习Nuxt.js中的加载方式。Nuxt.js是一个基于Vue.js、Node.js、Webpack和Babel.js的自由开源的Web应用程序框架。Nuxt是受到Next.js的启发，Next.js是一个类似目的的基于React.js的框架。

介绍： 为Nuxt.js应用程序添加一个加载屏幕可以有效提升用户体验。有几种不同的方法可以实现这一点，但在本文中，我们将重点介绍使用Nuxt.js的内置功能的一种方法。

创建Nuxt.js应用程序：

步骤1： 您可以使用以下命令创建一个新的Nuxt.js项目：

npx create-nuxt-app gfg

步骤2： 现在请使用以下命令导航到您的应用程序：

cd gfg

项目结构： 它将会是这样的。

添加加载进度条： Nuxt.js为您提供了一个可以在应用中使用的加载进度条。要添加加载进度条，请在您的index.vue文件中添加以下代码。

index.vue

<template> 
    <div> 
        <h3>This is the Home Page - GeeksforGeeks</h3> 
    </div> 
</template> 
  
<script> 
    export default { 
        mounted() { 
            this.nextTick(() => { 
                this.nuxt.loading.start() 
                setTimeout(() => this.nuxt.$loading.finish(), 2500) 
            }) 
        } 
    } 
</script>

这里我们使用 nuxt.loading.start() 来启动加载条，然后我们给了一个超时函数。

启动应用程序： 使用下面的代码运行应用程序。

npm run dev

输出：

自定义加载栏：

您可以自定义加载栏的属性，如颜色、大小和持续时间。为此，请在 nuxt.config.js 文件中添加以下代码。

nuxt.config.js

export default { 
  
    // Disable server-side rendering 
    ssr: true, 
    loading: { 
        color: 'green', 
        height: '6px'
    }, 
  
  
    // Global CSS 
    css: [ 
        'view-design/dist/styles/iview.css'
    ], 
  
    // Plugins to run before rendering page 
    plugins: [ 
        '@/plugins/view-ui', 
        { src: '~/plugins/vue-datepicker', ssr: false }, 
        { src: '~/plugins/vue-time', ssr: false }, 
    ], 
  
    // Auto import components 
    components: true, 
  
    // Modules for dev and build (recommended) 
    buildModules: [ 
    ], 
  
    // Modules 
    modules: [ 
    ], 
  
    // Build Configuration 
    build: { 
    } 
}

启动应用程序： 使用以下代码运行应用程序。

npm run dev

输出: