vue install方法使用心得

最新推荐文章于 2023-08-09 12:37:10 发布

太早灬

最新推荐文章于 2023-08-09 12:37:10 发布

阅读量295

点赞数

文章标签： vue.js

原文链接：https://blog.csdn.net/weixin_44795287/article/details/113877107?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163927709116780271993780%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=163927709116780271993780&

版权

vue提供install可供我们开发新的插件及全局注册组件等
install方法第一个参数是vue的构造器，第二个参数是可选的选项对象

	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)
					}
				})
			}
		})
	}
}