功能：增強 Vue

本質：包含 install 方法的一個物件，install 的第一個引數是 Vue，第二個以後的引數是外掛使用者傳遞的資料

定義外掛

物件.install = function (Vue, options) {

	// 新增全域性過濾器
	Vue.filter(...)
	
	 // 新增全域性指令
	 Vue.directive(...)
	 
	 // 配置全域性混入
	 Vue.mixin(...)
	 
	 // 新增例項方法
	 Vue.prototype.$myMethod = function () {...}
	 Vue.prototype.$myProperty = function = xxx
}
 

使用外掛：Vue.use()

例項

src 檔案結構

|-- src
    |-- App.vue
    |-- main.js
    |-- plugins.js
    |-- components
        |-- School.vue
        |-- Student.vue

App.vue

<template>
    <div id="app">
        <School/>
        <hr>
        <Student/>
    </div>
</template>

<script>
    import School from "@/components/School";
    import Student from "@/components/Student";

    export default {
        name: 'App',
        components: {
            School,
            Student
        },
        data() {
            return {}
        }
    }
</script>
 

main.js

import Vue from 'vue'
import App from './App.vue'

// 引入外掛
import plugins from "@/plugins";

Vue.config.productionTip = false

// 應用外掛
Vue.use(plugins)

new Vue({
    render: h => h(App),
}).$mount('#app')

plugins.js

export default {
    install(Vue) {
        console.log('@ install', Vue)

        // 全域性過濾器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 3)
        })

        // 定義混入
        Vue.mixin({
            data() {
                return {
                    a: 1,
                    b: 2
                }
            }
        })

        // 給 Vue 原型上新增一個方法
        Vue.prototype.hello = () => {
            alert('你好')
        }
    }
}
 

School.vue

<template>
    <div class="school">
        <h2>學校名稱：{{name | mySlice}}</h2>
        <h2>學校地址：{{address}}</h2>
        <button @click="test">測試 Hello</button>
    </div>
</template>

<script>
    export default {
        name: 'School',
        data() {
            return {
                name: 'ABCabc',
                address: '長沙',
            }
        },
        methods: {
            test(){
                this.hello()
            }
        }
    }
</script>

Student.vue

<template>
    <div class="school">
        <h2>姓名：{{name}}</h2>
        <h2>性別：{{sex}}</h2>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {
                name: '張三',
                sex: '男'
            }
        }
    }
</script>