Vue.jsでシンプルなローディングを表示する"vue-loading-template"の使い方

vue(vue.js)でloadingする際、よく紹介されているvue-loading-templateの紹介です。

しかし、リポジトリのreadmeを見てもexmapleを読んでも、検索しても、初見では使い方がわからないのではと思ったので、この記事を書くことにします。

かなり丁寧に解説することを目指します。

まず、vueの使い方ですが、nodeやyarnでinstallして使います。

今回は、package.jsonを用意します。

package.json

{
  "name": "sample-vue-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-loading-template": "^1.3.2",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.15"
  }
}

基本的にはpackage.jsonがあるディレクトリ内でyarn installなどをすればOKです。

command-exmaple

$ mkdir -p project
$ cd project
$ cat package.json 
{
  "name": "sample-vue-project",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11",
    "vue-loading-template": "^1.3.2",
    "vue-template-compiler": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.15"
  }
}

$ yarn install

次にvueのsrc file(ソースファイル)を用意します。通常はこれをbuildすると、html(web)が生成され、それをweb server上に置くことで有効なページとして動作します。

command-exmaple

$ mkdir -p src
$ touch src/main.js
$ vim src/main.js

src/main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

main.jsに全てを書いても良いですが、今回は、App.vueを読み込んで処理することにします。html形式のほうが最初はわかりやすいと思います。

なお、main.jsに書く形式と読み込む形式では、若干、書き方が異なります。

command-exmaple

$ vim src/App.vue

src/App.vue

<template>
	<div id="app">
			<Loading v-show="loading">
				<vue-loading type="barsCylon" color="#99892b" :size="{ width: '50px', height: '50px' }"></vue-loading>    
			</Loading>
			<button @click="picker" >start</button>
			<p v-show="!loading">{{ name }}</p>
	</div>
</template>

<script>
import { VueLoading } from 'vue-loading-template';
export default {
	data() {
		return {
			name:"",
			loading: false
		}
	},
	components: {
		VueLoading
	},
	methods: {
		picker: function(){
			this.loading = true;
			setTimeout(() => {
				// ここに処理	
				this.name = "test";
				this.loading = false;
			}, 1200);
		}
	}
}
</script>

これは、ボタンがクリックされるとnameに文字列を入れるのですが、その処理まで1.2秒の待機時間を設け、その間にローディングを表示しています。

ポイントとしては、ローディング処理の有無はv-showなどで変数を指定して制御するということです。

exampleにもreadmeにも書かれていない気がするので、これは初見ではよくわからないんじゃないかなと思いました。

例えば、以下のタグを用意する必要があり、loading=trueの場合は上で、loading=falseの場合は下になります。

<xxx v-show="loading"></xxx>

<xxx v-show="!loading"></xxx>

簡易なサンプルを用意すると、以下のような書き方になります。

<Loading v-show="loading">
<vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading>
</Loading>

<p v-show="!loading">{{ name }}</p>

ローディングの種類は、typeで指定しますが、これらはreadmeに書かれています。balls, bars, beat, bubbles, cylon, spin, spiningDubbles, barsCylonがあり、それらを指定できるようです。見た目はdemoから確認しましょう。

vueの場合は、sleep, timeout関連で待機時間を指定するのもハマりどころかもしれません。

setTimeout(() => {
// ここに処理  
}, 1200);

最後に、previwとbuildについて説明します。preview, buildとは、表示確認と実行ファイル生成のことです。

# preview
$ yarn serve
$ curl -sL localhost:8080

# build
$ yarn build
$ ls ./dist/

buildの場合は、基本的に./dist以下に生成されます。必要になるファイルは内容によります。buildされるファイル等を指定するのは、以下の設定ファイルを作り、yarn buildする必要があります。

vue.config.js

module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js'
    }
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css'
    },
  },
}

これを前提に話をすると、今回の場合は以下の構成で有効なページになります。

commmand-example

$ cp ./dist/*.js ~/public/web-server/
$ cd ~/public/web-server/
$ vim ./index.html

/index.html

<div id=app></div>
<script src=/chunk-vendors.js></script>
<script src=/app.js></script>

$ firefox index.html
or
$ jekyll serve

なお、普通にyarn buildで生成された./dist内でpreviewしてもOKですし、ファイル全部をdeploy(ここではweb-server上に置くこと)してもいいです。