vue中的install方法使用

更新時(shí)間：2024年03月12日 14:57:08 作者：牧杉-驚蟄

這篇文章主要介紹了vue中的install方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、語法

vue提供install可供我們開發(fā)新的插件及全局注冊組件等

install方法第一個(gè)參數(shù)是vue的構(gòu)造器

第二個(gè)參數(shù)是可選的選項(xiàng)對(duì)象

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

二、注冊組件

注冊單個(gè)組件

全局自定義指令

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);//注冊

注冊多個(gè)組件

在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進(jìn)行注冊

import Component from '@/components';//引入那個(gè)掛載的文件
Vue.use(Component);//注冊

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
install

相關(guān)文章

vue結(jié)合AntV?G2的使用踩坑記錄
這篇文章主要介紹了vue結(jié)合AntV?G2的使用踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中的vue-resource示例詳解
Vue與后臺(tái)Api進(jìn)行交互通常是利用vue-resource來實(shí)現(xiàn)的，本質(zhì)上vue-resource是通過http來完成AJAX請(qǐng)求相應(yīng)的。這篇文章主要介紹了Vue中的vue-resource示例詳解,需要的朋友可以參考下
2018-11-11
IDEA運(yùn)行Vue模塊化npm過程
下載Vue.js插件,配置npm后重啟IDEA,運(yùn)行npm run serve啟動(dòng)開發(fā)環(huán)境,總結(jié)個(gè)人經(jīng)驗(yàn),供參考
2025-09-09
在vue項(xiàng)目中如何獲取視頻的時(shí)長
這篇文章主要介紹了在vue項(xiàng)目中如何獲取視頻的時(shí)長，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue鼠標(biāo)懸停事件監(jiān)聽實(shí)現(xiàn)方法
頁面在鼠標(biāo)懸停(不動(dòng))n秒之后,頁面進(jìn)行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue 2.0項(xiàng)目中如何引入element-ui詳解
element-ui是一個(gè)比較完善的UI庫,但是使用它需要有一點(diǎn)vue的基礎(chǔ)，下面這篇文章主要給大家介紹了關(guān)于在vue 2.0項(xiàng)目中如何引入element-ui的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-09-09
Vue使用echarts的完整步驟及解決各種報(bào)錯(cuò)
最近在項(xiàng)目中需要對(duì)數(shù)據(jù)進(jìn)行可視化處理,而眾所周知echarts是非常強(qiáng)大的插件,下面這篇文章主要給大家介紹了關(guān)于Vue使用echarts的完整步驟及解決各種報(bào)錯(cuò)的相關(guān)資料,需要的朋友可以參考下
2022-05-05
Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯(cuò)誤的解決
這篇文章主要介紹了Vue實(shí)現(xiàn)遠(yuǎn)程獲取路由與頁面刷新導(dǎo)致404錯(cuò)誤的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01
vue.config.js中configureWebpack與chainWebpack區(qū)別及說明
這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06