使用Vue.use()寫一個自己的全局組件。
目錄如下：

然後在Loading.vue裏面定義自己的組件模板

<template>
    <div v-if="loadFlag">
        Loading...
    </div>
</template>
<script>
    export default {
        name: "MyLoading",//組件名稱
        props: [‘loadFlag‘],
    }
</script>

在loading文件夾下的index.js文件裏面添加install方法

import Loading from ‘./Loading.vue‘

Loading.install=function(Vue){
    Vue.component(Loading.name,Loading) //組件名稱取組件的name
}

export default Loading  //導出組件

main.js

// 引入自定義組件。index.js是組件的默認入口
import Loading from ‘../components/common/loading‘
Vue.use(Loading);

接下來就是在頁面裏面使用組件了，這個組件已經在main.js定義加載了

<template>
    <div id="app">
        <!-- 使用自定義組件 -->
        <my-loading></my-loading>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                loadFlag: true,
            }
        },
        created: function () {
            this.getTableData();
        },
        methods: {
            getTableData() {
                this.$http.post(‘.../‘).then(res => {
                    ...
                    this.loadFlag = false;
                });
            }
        }
    }
</script>
 

message組件和loading有所不同，使用Vue.prototype.$my_message = Message.install方法導入，調用時直接使用this.$my_message(‘這是一個message‘),可參考“Vue 自定義全局消息框組件”

所有的全局組件也可在一個js裏定義，然後在main.js全局使用
如下圖是common文件夾下的index.js

main.js中使用

Vue 使用use、prototype自定義自己的全局組件