專案需求：
在我們的實際專案的開發中，經常會遇到一些可以重複利用的方法和元件，比如:我們在一個專案中可能會經常用到格式化時間的方法。這個時候就需要我們把這個方法封裝起來，註冊成一個全域性的過濾器，在整個專案中都可以使用，這樣既可以提高程式碼的使用效率，也便於我們後期進行管理。
整體的思路（方法論）：
1、將我的方法或者元件單獨封裝起來，放到一個統一的資料夾裡。比如：common.
2、封裝好了方法用export將方法或者元件匯出
3、在入口檔案main.js中註冊為全域性的元件（vue.component）或者過濾器（vue.filter）或者外掛 （vue.prototype.$）
一、註冊全域性過濾器

var FormatMoney = function (string) {
  var a = Number(string).toFixed(0) + '元'
  return a
}
export default FormatMoney

3、在入口檔案main.js檔案中註冊為全域性過濾器

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入金額過濾器
import FormatMoney from './commonjs/FormatMoney'

// 註冊為全域性過濾器
Vue.filter('FormatMoney', FormatMoney)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: '<App/>'
})
 

4、這樣就大功告成了，在專案中所以元件中我們就可以使用我們定義好的全域性過濾器了

二、註冊全域性元件
方法和註冊全域性過濾器一樣，我們來註冊一個全域性提示的吐司toast元件
1、新建公共檔案toasts.js，並且封裝好元件,用export匯出檔案

<template>
  <div>
    <div class="toats1">{{contents}}</div>
  </div>
</template>
<script>
export default {
  name: 'Toats',
  data () {
    return {
    }
  },
  props: ['contents']
}
</script>
<style scoped>
  .toats1{
    width:60%;
    height:80px;
    background-color: rgb(0, 0, 0);
    text-align: center;
    color: white;
    line-height: 80px;
    margin: 0 auto;
    border-radius: 5px;
    box-shadow: 1px 1px 8px #000
  }
</style>
 

2、在main.js檔案中匯入我們封裝好的元件，並且用vue.component註冊為全域性元件

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入金額過濾器
import FormatMoney from './commonjs/FormatMoney'
// 引入全域性元件
import toats from './cmcomponents/toats'

// 註冊為全域性過濾器
Vue.filter('FormatMoney', FormatMoney)
// 註冊為全域性元件
Vue.component('toats', toats)
Vue.config.productionTip = false

3、這樣我們在專案的其他任意元件裡也能使用我們定義的公共元件了

使用的效果是這個樣子的：

注意事項：
註冊公共元件涉及到 使用props、$emit、bus元件的傳值的問題，這個我後續再找時間整理一個文案出來。
最後：
關於註冊全域性公共外掛我的上一片文章以註冊全域性axios外掛為例子，給出了詳細的說明，大家如果感興趣可以參考一下。
vue.js中使用axios資料請求遇到的問題這篇文章幫你妥妥的解決