vue中的install方法使用

 更新时间:2024年03月12日 14:57:08   作者:牧杉-惊蛰  
这篇文章主要介绍了vue中的install方法使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、语法

vue提供install可供我们开发新的插件及全局注册组件等

install方法第一个参数是vue的构造器

第二个参数是可选的选项对象

export default {
	install(Vue,option){
		组件
		指令
		混入
		挂载vue原型
	}
}

二、注册组件

注册单个组件

  • 全局自定义指令
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);//注册

注册多个组件

  • 在install()方法中挂载组件
 
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('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);//注册

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue结合AntV G2的使用踩坑记录

    vue结合AntV G2的使用踩坑记录

    这篇文章主要介绍了vue结合AntV G2的使用踩坑记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue中的vue-resource示例详解

    Vue中的vue-resource示例详解

    Vue与后台Api进行交互通常是利用vue-resource来实现的,本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下
    2018-11-11
  • IDEA运行Vue模块化npm过程

    IDEA运行Vue模块化npm过程

    下载Vue.js插件,配置npm后重启IDEA,运行npm run serve启动开发环境,总结个人经验,供参考
    2025-09-09
  • 在vue项目中如何获取视频的时长

    在vue项目中如何获取视频的时长

    这篇文章主要介绍了在vue项目中如何获取视频的时长,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue鼠标悬停事件监听实现方法

    vue鼠标悬停事件监听实现方法

    页面在鼠标悬停(不动)n秒之后,页面进行相应的事件,下面这篇文章主要给大家介绍了关于vue鼠标悬停事件监听的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue 2.0项目中如何引入element-ui详解

    vue 2.0项目中如何引入element-ui详解

    element-ui是一个比较完善的UI库,但是使用它需要有一点vue的基础,下面这篇文章主要给大家介绍了关于在vue 2.0项目中如何引入element-ui的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-09-09
  • Vue使用echarts的完整步骤及解决各种报错

    Vue使用echarts的完整步骤及解决各种报错

    最近在项目中需要对数据进行可视化处理,而众所周知echarts是非常强大的插件,下面这篇文章主要给大家介绍了关于Vue使用echarts的完整步骤及解决各种报错的相关资料,需要的朋友可以参考下
    2022-05-05
  • Vue实现远程获取路由与页面刷新导致404错误的解决

    Vue实现远程获取路由与页面刷新导致404错误的解决

    这篇文章主要介绍了Vue实现远程获取路由与页面刷新导致404错误的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue.config.js中configureWebpack与chainWebpack区别及说明

    vue.config.js中configureWebpack与chainWebpack区别及说明

    这篇文章主要介绍了vue.config.js中configureWebpack与chainWebpack区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3中Vuex状态管理学习实战示例详解

    Vue3中Vuex状态管理学习实战示例详解

    这篇文章主要为大家介绍了Vue3中Vuex状态管理学习实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论