一、元件和外掛的區別

1. vue外掛可以將自己的模組新增到Vue原型物件上，然後元件中可以通過this直接引用。還要就是通過外掛機制，可以通過一個入口，就可以將一系列元件新增到環境中，直接使用
2. 外掛是採用通用介面編寫的，多用於製作好的東西功能擴充套件。
3. vue元件只是一個獨立的模組，可重複使用並且可以和其他物件進行互動的物件
4. 外掛通常會為 Vue 新增全域性功能。外掛的範圍沒有限制——一般有下面幾種：
   新增全域性方法或者屬性，如: vue-custom-element
   新增全域性資源：指令/過濾器/過渡等，如 vue-touch
   通過全域性 mixin 方法新增一些元件選項，如: vue-router
   新增 Vue 例項方法，通過把它們新增到 Vue.prototype 上實現。
   
   一個庫，提供自己的 API，同時提供上面提到的一個或多個功能，如 vue-router
   Vue.js 的外掛應當有一個公開方法 install 。
5. 如果你的模組或者元件想對外公開，最友好的方式就是通過外掛機制提供

二、簡單構建一個全域性元件Message（訊息提示）1.元件模板/* components/Message/index.vue */<template> <div class="ta-message" v-if="isShow"> <span>{{message}}</span> </div></template><script>export default { name: 'Message', data () { return { } }, props:{ message: { type: String, default: '成功' }, isShow: { type: Boolean, default: true } }, methods:{ close(){ this.isShow = false; } }}</script>
2.給元件新增全域性功能（外掛）/* components/Message/index.js */import msg from './index.vue';
//定義外掛物件const Message = {};//Vue的install方法，用於定義vue外掛Message.install = function(Vue, options){ const MessageInstance = Vue.extend(msg); let currentMsg; const initInstance = () =>{ //例項化vue示例 currentMsg = new MessageInstance(); let msgEl = currentMsg.$mount().$el; document.body.appendChild(msgEl); }; //在Vue的原型上新增例項，以全域性呼叫 Vue.prototype.$msg = { showMsg(options){ if(!currentMsg){ initInstance(); } Object.assign(currentMsg, options); //將頁面的物件傳給currentMsg物件，否則阿會使用原有的 setTimeout(() => { currentMsg.close(); }, 1000); } }};export default Message;3.全域性使用// main.jsimport Message from './components/Message/index'Vue.use(Message);4.頁面呼叫showconfirm(){ this.$msg.showMsg({ isShow: true }); }