Vue.jsアプリケーションに読み込みインジケーターを追加する方法

投稿日: 2022-04-20 2022-10-14
タグ: Development, javascript, Vue.js

序章

読み込みインジケーターは、WebまたはモバイルのあらゆるアプリケーションでUX（ユーザーエクスペリエンス）を向上させます。これらのアニメーションは、アクションが実行されており、結果がまもなく返されるというフィードバックをユーザーに提供します。

Webアプリケーションには、ローダーを必要とする2つの主要なイベントがあります。

別のページへの移動やAJAXリクエストなどのネットワークリクエスト。
重い計算が実行されているとき。

この記事では、Vue.jsアプリケーションにローダーを追加する方法をいくつか紹介します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

このチュートリアルは、Nodev14.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、プログレッシブWebアプリ（PWA）のサポート、Vuex、CSSプリプロセッサー、単体テスト、またはエンドツーエンド（E2E）テストは必要ありません。

次に、新しいプロジェクトディレクトリに移動します。

cd vue-loading-indicators

次のコマンドを実行して、Webブラウザでアプリケーションを表示できます。

npm run serve

あなたが訪問するとき localhost:8080 Webブラウザでは、次のように表示されます。 "Welcome to Your Vue.js App" メッセージ。 Vueルーターを含めたので、ホームページとバージョン情報ページへのリンクもあります。これらの2つのページ間を移動するときに、読み込みインジケーターを追加することが目標になります。

Vue CLIの詳細については、VueCLIのドキュメントを参照してください。

これで、構築を開始する準備が整いました。

ステップ2—使用 `nprogress`

任意の負荷インジケータを使用できます。このチュートリアルでは、 nprogress をインストールして、読み込みインジケーターとして使用します。

使用しません npm また yarn このため。 CDN（コンテンツ配信ネットワーク）から参照します。

作成したVueCLIプロジェクトで、次の場所に移動します public/index.html ファイル：

nano public/index.html

そして、閉じる前に以下のスニペットを追加してください </head> 鬼ごっこ：

public / index.html

<head>
  <!-- ... -->
  <link href="https://unpkg.com/[email protected]/nprogress.css" rel="stylesheet" />
  <script src="https://unpkg.com/[email protected]/nprogress.js"></script>
</head>

nprogress いくつかのAPIメソッドを公開していますが、この記事では2つ必要です—start と done. これらのメソッドは、プログレスバーを開始および停止します。

nprogress ローダーの進行方法を構成することもできます。これは手動でカスタマイズできますが、この記事ではデフォルトの動作を使用します。

ステップ3—ルーターの使用

ルーターを使用してプログレスバーをWebサイトに追加する場合、期待される一般的な機能は次のとおりです。

「ユーザーが新しいページに移動すると、ローダーはページの上部でカチカチ音をたて始め、ユーザーに次のページのダウンロードの進行状況を示します。」

Vue Router この機能を実現するためにフックできるフックが付属しています。

を開きます src/router/index.js ファイル：

nano src/router/index.js

そして、前に以下のコードを追加します export:

src / router / 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 ページリクエストが発生すると。 The afterEach フックは、リンクがプログレスバーを停止するように完全に評価された後、ページ要求が成功したかどうかを気にしないようにルーターに通知します。

この時点で、アプリケーションを実行できます。

npm run serve

あなたが訪問するとき localhost:8080 Webブラウザでは、ホームページとバージョン情報ページの間を移動できます。そうすると、アプリケーションに追加した読み込みインジケーターが表示されます。

次のステップでは、負荷インジケーターについてさらに詳しく説明します。

ステップ4—高度な使用法を探る

このセクションでは、アプリケーションにインジケーターをロードするための他のユースケースを紹介します。

これらは例とともに提示され、自分で探索したいと思わない限り、チュートリアルに直接実装することはありません。

HTTPライブラリの使用

プログレスバーを追加したいアプリケーションのもう1つの部分は、ユーザーが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 何らかの外部アクションによって状態をロード状態に変更できるコンポーネント。

コンポーネントは1つの支柱のみを取ります。 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）としてローダーを作成し、小道具を使用してその状態を変更できます。

これらのタイプのローダーは、アプリケーションのグローバルな状態に影響を与えないコンポーネントに適していますが、それでもユーザーが適切なアクションに接続していると感じられるようにする必要があります。

次に例を示します。

注：の内容の詳細の一部 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ルーター遅延読み込みを使用する必要があります。

結論

この記事では、Vue.jsアプリに読み込みインジケーターを追加するいくつかの方法について説明しました。ローディングインジケーターは、ユーザーにフィードバックを提供するための便利なツールです。

Vue.jsの詳細については、Vue.jsトピックページで演習とプログラミングプロジェクトを確認してください。

getdocs

13036

序章

前提条件

ステップ1—プロジェクトの設定

ステップ2—使用 nprogress

ステップ3—ルーターの使用

ステップ4—高度な使用法を探る

HTTPライブラリの使用

コンポーネント内でのローダーの使用

再利用可能なローダーに高次のコンポーネントを使用する

非同期Vueコンポーネントの使用

結論

getdocs

ステップ2—使用 `nprogress`