Vueグローバルパッケージloadingローディングチュートリアル（グローバルモニター）

前言:
ページの美観のために、インターフェースを要求する時にデータがないことを遅延して、ページの感じは残忍で、loadingをカプセル化して、インターフェースが成功した後に隠れるように求めます（私はこれが使うvantコンポーネントです。自分の状況によって変えます）。
ステップ1:
loadingn.vueを作成します

<template>
 <div class="loading">
 <van-loading size="36px" vertical>   ...</van-loading>
 </div>
</template>

<script>
export default {
 props: {},
 data() {
 return {};
 },
 computed: {},
 created() {},
 mounted() {},
};
</script>

<style scoped>
</style>

ステップ2:
app.vue導入追加スイッチ


コード:

<loading v-show="isLoading"></loading>
import { mapState } from "vuex";
import loading from "./components/loading";

 computed: {
 ...mapState(["isLoading"])
 },
 components: {
 loading
 },

//css
.loading {
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 position: fixed;
 padding-top: 5.333333rem;
}

ステップ3:
vuex保存状態

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
 isLoading: false//loading    
 },
 mutations: {
 changeisLoading(state, data) {
 state.isLoading = data
 }
 },
})
export default store

ステップ4:
インターフェースの状態を監督して、全体的にisLoadingの状態を変えます。

//      
axios.interceptors.request.use(
 config => {
 //   vuex  isLoading    ，  true，loading  
 store.state.isLoading = true
 return config;
 },
 error => {
 return Promise.error(error);
 }
);

//      
axios.interceptors.response.use(
 response => {
 //          200，        ，        
 //         
 if (response.status === 200) {
 //loading  
 store.state.isLoading = false
 return Promise.resolve(response);
 } else {
 return Promise.reject(response);
 }
 },
 error => {
 if (error.response.status) {
 return Promise.reject(error.response);
 }
 }
);

OKパッケージ完成！
補足知識：vue-cli 4 APPの熱更新が失効しました。適時に更新できません。
前言
プロジェクトの中で問題があって、熱更新が失効して、毎回直ちに注意することができなくて、百度の多くの方法、効果は残忍で著しいのではありませんて、それからwebpack 4.0が手動で配置して熱更新を開く必要があることを発見して、黙認して開けていません。
解決策
一、インストール依存webpack-dev-server
自分の都合でnpm/cnpmをインストールします。
npm install--save-dev webpack-dev-server/cnpm install--save-dev webpack-dev-server
二、vue.co nfig.jsファイルを配置する。
vue-cli 4フォルダは以前とは大きく違っていますので、vue.com fig.jsに関連パラメータを配置し、devServerの配置を追加します。

devServer: {
 compress: true,
 disableHostCheck: true, //webpack4.0      
 }

位置は下図の通りです。

三、package.jsonファイルを配置する。
package.jsonの中のスクリプトオブジェクトにコマンドを追加し、ローカルサービスを開始します。
「serve」：「vue-cli-service serve&webpack-dev-server--open」
位置は下図の通りです。

再起動する
最後にnpm run serverを実行して、再び包装を行います。
以上のこのvueグローバルパッケージのloadingローディングチュートリアル（大域モニター）は小編集が皆さんに提供したすべての内容です。参考にしていただければと思います。どうぞよろしくお願いします。