vue(vue.js)でloadingする際、よく紹介されているvue-loading-templateの紹介です。
しかし、リポジトリのreadmeを見てもexmapleを読んでも、検索しても、初見では使い方がわからないのではと思ったので、この記事を書くことにします。
かなり丁寧に解説することを目指します。
まず、vueの使い方ですが、nodeやyarnでinstallして使います。
今回は、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です。
$ 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上に置くことで有効なページとして動作します。
$ mkdir -p src
$ touch src/main.js
$ vim 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に書く形式と読み込む形式では、若干、書き方が異なります。
$ vim 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する必要があります。
module.exports = {
configureWebpack: {
output: {
filename: '[name].js',
chunkFilename: '[name].js'
}
},
css: {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
},
},
}
これを前提に話をすると、今回の場合は以下の構成で有効なページになります。
$ cp ./dist/*.js ~/public/web-server/
$ cd ~/public/web-server/
$ vim ./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上に置くこと)してもいいです。