自定義vue元件，一般是區域性引用的方式載入，使用的時候，在應用的元件中使用 import moduleName from ‘module’ 匯入，在components中註冊

<template>
  <div class="app-NewsInfo">
    <h3>{{info.title}}</h3>
    <!-- 新聞評論子元件。 -->
    <comment :id="id"></comment>
  </div>
</template>
<script
 
>
import comment from "../sub/comment.vue";
export default {
  data() {
    return {
      info: {},
      id: this.$route.query.id
    };
  },
  methods: {},
  components: {
    comment
  },
</script>

1.首先建立一個資料夾loading

用來儲存需要全域性引用的元件，並且存放一些配置檔案。

2.建立一個loading.vue的元件。

該元件中除了元件的基礎結構，並無其他內容。它的作用是用來載入準備自定義的元件，最後將loading元件載入到全域性的Vue中，這樣就一次性完成了所有自定義元件的載入，非常方便。

<template>
  <div class="loading"></div>
</template>

<script>
export default {
  data() {
    return {}
 
;
  },
  methods: {}
};
</script>
<style scoped>
</style>

3.建立自定義元件

這裡以一個簡單封裝的mint-ui輪播圖為例。

<template>
  <div class="app-turns">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,i) of list" :key="i">
        <img :src="item.img_url" @click="detail" :data-id="item.id">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  name: "navbar",
  props: ["list"], //接收父元件資料
  data() {
    return {
    };
  },
  methods: {
    detail(e) {
      var id = e.target.dataset.id;
      var url = `/GoodsInfo/${id}`;
      this.$router.push(url);
    }
  },
  created() {}
};
</script>
<style scoped>
.mint-swipe {
  height: 150px;
}
.mint-swipe img {
  width: 100%;
}
</style>

4.建立index.js，用來匯出所有自定義元件。

import turns from './turns.vue'

const loading = {
  install: function (Vue) {
    Vue.component('turns', turns)
  }
}

export default loading;

其實到這裡元件封裝就結束了，下面再演示下如何使用。

5.在main.js中，匯入並使用loading元件。

import loading from './lib/loading';

Vue.use(loading);

這樣就將元件全域性引用成功了！

6.在需要使用的地方，直接使用元件名即可。

<template>
  <div class="app-home">
  
    <turns :list="list"></turns>
    
  </div>
</template>

通過這種方式，就能實現元件的全域性引用。
這種做的好處是對於複用性非常高的元件，省去了每次匯入的麻煩；
缺點是無法直觀的看到元件引入和註冊，對於不清楚的人來說看不懂元件名的意義。