最近要在乾坤袋裡面加開發三個全域性元件，所以來學習下這部分的知識~
（一）外掛程式和元件的區別
元件：是對 某功能 或者 某模組 的封裝 （比如 loading、toast 等）
外掛程式：是對一系列元件的封裝 （比如 vuex、vue-router），外掛程式裡面可以有很多元件
外掛程式與元件的關係：
外掛程式可以封裝元件，元件暴露資料給外掛程式
（二）外掛程式的優點
1. 開箱即用
2. 功能比元件更強大、更豐富
3. 一次引入、終生受益
4. 打包帶走、隨走隨用 （比如vue、react 都可使用等等）
（三）vue 外掛程式分類
1. 新增全域性方法或者屬性 (如vue-element）
2. 新增全域性資源：指令/過濾器/過渡等，如 vue-touch
3. 通過全域性 main 方法 新增一些元件選項，如 vuex
4. 新增 vue 例項方法，通過把他們新增到 vue.prototype 上面實現
(四) 用到的語法
vue.component 用於生成全域性元件， 它接受兩個引數
vue.component('元件名稱', 元件)詳情見文章：
但當時使用的指令是 vue.extend，所以這兩個指令有什麼區別呢？
在官方文件上看到了這樣一句話：
vue.component('my-component', vue.extend())1. vue.extend 是構造乙個元件的語法器，你給它引數 他給你乙個元件
2. 區別參考這篇文章：
前幾天的部落格就是使用第二種方法例項化的
4. 建立例項構造器 （vue.extend）---> 構造器例項化 （vue.component）
（五）自定義乙個 toast 全域性元件
toast.vue
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 5rem;
line-height: 0.35rem;
white-space: wrap;
padding: 0.25rem;
border-radius: 6px;
color: #fff;
font-size: 0.18rem;
background: rgba(0,0,0, 0.8)
}toast.js
import vue from 'vue'
import toast from './toast.vue' // 引入元件
toast.install = function ()
export default toast
import toast from './common/toast/toast.js'
vue.use(toast)
自定義Vue外掛程式
在vue專案中，需要用到公共的方法時，可以將這些方法寫在外掛程式裡。在外掛程式裡可以自己定義全域性的變數，過濾器 指令 例項上的方法等。使用外掛程式可以為vue新增全域性功能，包括全域性方法或屬性 全域性資源 指令 過濾器 過渡等 通過全域性mixin方法新增一些元件選項 新增例項方法 新增庫 目前...
自定義Vue外掛程式
今天咱們來玩一下vue中的自定義元件，此案例直接通過script引入js的形式定義元件 我是簡單的寫了乙個彈出框的小外掛程式 css樣式 這就不需要解釋了吧，強擼 html結構 元件核心js var alert 此處的install方法 是vue中規定好的 alert.install functio...
vue之自定義外掛程式
1 外掛程式的作用 2 開發外掛程式並且使用 在專案目錄下建立plugins.js檔案，用於寫入外掛程式內容 function 宣告乙個外掛程式物件 myplugin.install function vue,options 2.新增全域性資源 vue.directive my directive ...