如何向Vue.js应用程序添加加载指示器

来自菜鸟教程
跳转至：导航、​搜索

介绍

加载指标可改善任何应用程序（Web 或移动设备）中的 UX（用户体验）。 这些动画向用户提供正在执行某项操作的反馈，并且很快就会返回结果。

在 Web 应用程序中，有两个主要的事件需要加载器：

  • 网络请求，例如导航到不同的页面或 AJAX 请求。
  • 运行繁重的计算时。

本文将介绍几种将加载器添加到 Vue.js 应用程序的方法。

先决条件

要完成本教程，您需要：

  • Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。

本教程已使用 Node v14.2.0、npm v6.14.5、vue v2.6.11 和 vue-router v3.1.6 进行了验证。

第 1 步 — 设置项目

让我们创建一个新的 Vue 项目。 本教程将使用 Vue CLI（命令行界面）来搭建您的应用程序： 

npx @vue/cli@4.5.4 create --inlinePreset='{ "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "base", "lintOn": ["save"] } }, "vuex": true, "router": true, "routerHistoryMode": true }' vue-loading-indicators

这个长命令是一组基于 @vue/cli/packages/@vue/cli/lib/options.js 建立的默认值的预设。 重新格式化以提高可读性时，它看起来像这样： 

{
  "useConfigFiles": false,
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "base",
      "lintOn": ["save"]
    }
  },
  "vuex": true,
  "router": true,
  "routerHistoryMode": true
}

这些预设将 vue-router 添加为插件（cli-plugin-router），将 vuex 添加为插件（cli-plugin-vuex），开启历史模式，添加Babel，添加ESLint。

对于本教程的需要，您不需要 TypesScript、Progressive Web App (PWA) 支持、Vuex、CSS 预处理器、单元测试或端到端 (E2E) 测试。

接下来，切换到新的项目目录： 

cd vue-loading-indicators

您可以通过运行以下命令在 Web 浏览器中查看您的应用程序： 

npm run serve

当您在网络浏览器中访问 localhost:8080 时，您应该会看到 "Welcome to Your Vue.js App" 消息。 由于您包含了 Vue 路由器，因此还会有指向 Home 页面和 About 页面的链接。 您的目标是在这两个页面之间导航时添加一个加载指示器。

如果想了解更多关于 Vue CLI 的知识，可以参考【X62X】Vue CLI 文档【X87X】。

现在，您已准备好开始构建。

第 2 步 — 使用 nprogress

您可以使用您选择的任何加载指示器。 在本教程中，您将安装 nprogress 作为加载指示器。

您不会为此使用 npm 或 yarn。 您将从 CDN（内容交付网络）引用它。

在创建的 Vue CLI 项目中，导航到 public/index.html 文件： 

nano public/index.html

并在结束 </head> 标记之前添加以下代码段：

公共/index.html 

<head>
  <!-- ... -->
  <link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" />
  <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
</head>

nprogress 公开了 几个 API 方法，但对于本文，您将需要两个 - start 和 done。 这些方法启动和停止进度条。

nprogress 也可以配置加载程序的进度。 虽然这可以手动自定义，但本文将使用默认行为。

第 3 步 — 使用路由器

当您使用路由器向您的网站添加进度条时，您期望的典型功能是：

“当用户导航到新页面时，加载程序开始在页面顶部滴答作响，向用户显示下一页的下载进度。”

Vue Router 带有可以挂钩的钩子，可让您完成此功能。

打开src/router/index.js文件： 

nano src/router/index.js

并在 export 之前添加以下代码：

src/路由器/index.js 

// ...

router.beforeResolve((to, from, next) => {
  // If this isn't an initial page load.
  if (to.name) {
    // Start the route progress bar.
    NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  // Complete the animation of the route progress bar.
  NProgress.done()
})

export default router

当您连接到 beforeResolve 路由时，您是在告诉路由器在页面请求发生时启动 nprogress。 afterEach 钩子告诉路由器，在链接完全评估以停止进度条之后，它不应该关心页面请求是否成功。

此时，您可以运行您的应用程序： 

npm run serve

当您在网络浏览器中访问 localhost:8080 时，您可以在 Home 页面和 关于 页面之间导航。 当您这样做时，您将看到您添加到应用程序中的加载指示器。

下一步将进一步探索加载指标。

第 4 步 — 探索高级用法

在本节中，您将了解在应用程序中加载指标的其他用例。

这些将与示例一起呈现，除非您想自己探索，否则您不会在教程中直接实现它们。

使用 HTTP 库

您可能希望为其添加进度条的应用程序的另一部分是当您的用户发出 AJAX 请求时。

今天的大多数 HTTP 库都有一种在请求或响应发生之前触发的中间件或拦截器。 因此，您还可以连接到您选择的库。

在本教程中，您将使用 axios。 该库使用术语拦截器。

安装axios： 

npm install axios@0.20.0

然后创建一个 HTTP.js 文件： 

nano HTTP.js

然后，您可以配置 axios 像这样工作：

HTTP.js 

import axios from 'axios'

// create a new axios instance
const instance = axios.create({
  baseURL: '/api'
})

// before a request is made start the nprogress
instance.interceptors.request.use(config => {
  NProgress.start()
  return config
})

// before a response is returned stop nprogress
instance.interceptors.response.use(response => {
  NProgress.done()
  return response
})

export default instance

此代码允许您处理连接并在每次发出请求时获取进度条。

在组件中使用加载器

有时您没有发出页面请求或 AJAX 请求。 它可能只是一个需要时间的依赖于浏览器的操作。

让我们考虑一个自定义的 DownloadButton 组件，它可以由于某些外部操作而将其状态更改为加载状态。

该组件将只使用一个道具，loading： 

<template>
  <DownloadButton :loading="loading">Download</DownloadButton>
</template>

示例组件类似于以下内容：

注意： SVG viewBox、path和style的一些更精细的细节在这个例子中没有定义。


src/components/DownloadButton.vue 

<template>
  <button class="Button" :disabled="loading">
    <svg v-if="loading" class="Button__Icon Button__Spinner" viewBox="...">
      <path d="..."/>
    </svg>
    <svg v-else class="Button__Icon" viewBox="0 0 20 20">
      <path d="..."/>
    </svg>
    <span v-if="!loading" class="Button__Content">
      <slot/>
    </span>
  </button>
</template>

<script>
export default {
  props: {
    loading: { type: Boolean }
  }
}
</script>

<style>
  /* ... */
</style>

这是此代码将产生的内容的演示：

为可重用加载器使用高阶组件

您可以为我们的组件创建加载器作为包装器 (HOC)，然后您可以通过 props 修改它们的状态。

这些类型的加载器适用于不影响应用程序全局状态的组件，但您仍然希望用户感觉与适当的操作相关联。

这是一个例子：

注： Stats的内容的一些更精细的细节在这个例子中没有定义。 


// This loader will add an overlay with the text of 'Loading...'
const Loader = {
  template: `
    <div class="{'is-loading': loading}">
      <slot/>
    </div>
  `,
  props: ['loading']
}

const Stats = {
  template: `
    <Loader :loading="updating">
      ...
    </Loader>
  `,
  props: ['updating']
}

const app = new Vue({
  template: `
    <div class="widget">
      <Stats :updating="fetchingStats"/>
      <Button @click="fetchingStats = true">
        Latest stats
      </Button>
    </div>
  `,
})

这是此代码将产生的内容的演示：

使用异步 Vue 组件

Vue 的 异步组件 允许您仅在需要时从服务器获取组件。 与其为最终用户提供他们可能永远不会使用的组件，不如为最终用户提供他们需要的东西。

异步组件还带有对 加载和错误状态 的原生支持，因此这里不需要任何额外的配置。

这是一个例子： 

const AsyncComponent = () => ({
  component: import('./MyComponent.vue'),
  // show this component during load
  loading: LoadingComponent,
  // show this component if it fails to load
  error: ErrorComponent,
  // delay before showing the loading component
  delay: 200,
  // error if the component failed to loadin is allotted time in milliseconds default in Infinity
  timeout: 3000
})

要使用这里的方法使用异步组件，您需要使用Vue Router 延迟加载。

结论

在本文中，您探索了向 Vue.js 应用程序添加加载指示器的一些方法。 加载指标是向用户提供反馈的有用工具。

如果您想了解有关 Vue.js 的更多信息，请查看 我们的 Vue.js 主题页面 以获取练习和编程项目。

取自“https://cainiaojiaocheng.com/index.php?title=如何向Vue.js应用程序添加加载指示器&oldid=28444”
Powered by MediaWiki