vue中install方法

vue提供install可供我們開發新的插件及全局注冊組件等
install方法第一個參數是vue的構造器，第二個參數是可選的選項對象

export default {
    install(Vue,option){
        組件
        指令
        混入
        掛載vue原型
    }
}

全局注冊組件

import PageTools from '@/components/PageTools/pageTools.vue'
import update from './update/index.vue'
import ImageUpload from './ImageUpload/ImageUpload.vue'
import ScreenFull from './ScreenFull'
import ThemePicker from './ThemePicker'
import TagsView from './TagsView'
export default {
  install(Vue) {
    Vue.component('PageTools', PageTools)
    Vue.component('update', update)
    Vue.component('ImageUpload', ImageUpload)
    Vue.component('ScreenFull', ScreenFull)
    Vue.component('ThemePicker', ThemePicker)
    Vue.component('TagsView', TagsView)
  }
}

在main.js中直接用引用並Vue.use進行注冊

import Component from '@/components'
Vue.use(Component)

全局自定義指令

export default{
    install(Vue){
        Vue.directive('pre',{
            inserted(button,bind){
                button.addEventListener('click',()=>{
                    if(!button.disabled){
                        button.disabled = true;
                        setTimeout(()=>{
                            button.disabled = false
                        },1000)
                    }
                })
            }
        })
    }
}

在main.js跟注冊組件一樣

import pre from '@/aiqi'

Vue.use(pre)

 

 

本文鏈接：https://blog.csdn.net/weixin_44795287/article/details/113877107