插件的主要作用是增强,类似外挂。插件的本质是一个对象,但是里面必须包含一个install

我们在src文件夹底下新增一个plugin.js,用来存储我们的插件。

初始代码参考如下:

const object={
    //可以接收参数,是Vue的构造函数
    install(e){
        console.log("install~~~")
        console.log(e)
    }

}
export default  object

然后我们在mian.js中引用这个插件

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

Vue.config.productionTip = false

//引入插件
import plugins from './plugins'

//应用插件
Vue.use(plugins)


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

当运行项目时,打开控制台,显示如下:

可以看出是vue的构造函数,那么这个的功能就比较强大了,我们拿前面过滤器代码来实验。

plugins.js

const object={
    //可以接收参数,是Vue的构造函数
    install(Vue){
        console.log("install~~~")
        console.log(Vue)
        //全局过滤器(拼接功能)
        Vue.filter('mystr',function(value){
            return value+"hello"
        })
    }

}
export default  object

student.vue

<template>
  <div>
    <span>{{name | mystr}}</span>
  </div>
</template>
<script>
  export default{
    name:'Student',
    data(){
      return{
        name:"张三"
      }
    }
  }
</script>

效果图:

可以看出,功能比较强大,前面学的 混入、过滤等都可以在这里实现,而且是全局的。

分类: 前端