vue元件有兩種，一種是全域性元件，一種是區域性元件。整個專案經常用到的用全域性寫法，用到比較少的專供特定頁面用的使用區域性元件。

全域性元件引入寫法：在專案的main.js中：

import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 匯入自己寫的元件檔案

Vue.use(MyComponent); // 自定義全域性元件的時候需要Vue.use();

Vue.component('my-component', MyComponent); //初始化元件

new Vue({
  el: '#app',
  router,
  components: {
    App,
    MyComponent
  },
  template: '<App/>',
}); 
 

區域性元件引入寫法：在需要使用元件的a.vue檔案中：

<template>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
  components: {MyComponent}, // 直接初始化就可以啦，不需要Vue.use();
  data() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
</style> 

下面附上自定義元件的MyComponent.vue檔案程式碼：

<template>
  <div>
    <a @click="methods1()"></a>
  </div>
</template>
<script>
import { MessageBox } from 'mint-ui';
export default {
  data () { // 元件內參數定義在data中
    return {
      data1: {}
    };
  },
  props: { // 元件傳參使用props
    value1: String,
    value2: Number
  },
  methods: { // 元件的計算方法
    methods1 () {
    }
  }
};
</script>
<style lang="scss" scoped>
</style>