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