一、插件封裝
1、在Vue生態中，除了Vue本身，其它所有的與Vue相關的第三方包，都是插件
例子：
import VueRouter form 'vue-router'
Vue.use(VueRouter) // 注冊插件2、如何封裝Vue插件
（1）第一種寫法
const Plugin = { install (Vue) { //do something} }
（2）第二種寫法
const Plugin = function (Vue) {}
3、如何使用插件
Vue.use(Plugin)
調用插件上的install方法，并傳入Vue實參。
4、插件的作用
插件是一種更加高級的代碼復用技術，可以以插件的方式為我們提供可復用的組件、混入、指令、過濾器、原型鏈API等等。
二、例子代碼
<html>
<head><title>插件封裝</title><style></style>
</head>
<body><div id="app"><my-button></my-button><h1>{{ "99.1" | rmb }}</h1><h1 v-color='"red"'>測試</h1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const MyPlugin = {install: function(Vue) {// 插件中可以全局混入Vue.mixin({data() {return {version: 'v2'}}})// 插件中可以定義全局組件Vue.component('my-button', {template: `<div>我的按鈕</div>`})// 插件中可以定義全局過濾器Vue.filter('rmb', val=>('￥'+val))// 插件中可以定義全局指令Vue.directive('color', function(el,binding){el.style.color = binding.value})// 插件中可以操作Vue的原型鏈Vue.prototype.$ajax = function(url,method,data) {console.log('---調接口')}}}Vue.use(MyPlugin)const app = new Vue({mounted() {console.log('---version', this.version)console.log('---$ajax', this.$ajax)}})app.$mount('#app')</script></body>
</html>
)
