Vue全域性元件的開發

2021-10-19 19:17:20 字數 1129 閱讀 4827

把一些使用頻率較高的元件封裝為全域性元件,防止頻繁引入。例如:element中的各個元件

實現方法,通過借助webpack的require.context() 方法來封裝自己常用的全域性元件,開發步驟如下

第一步,封裝importall.js

//  importall.js檔案

import vue from 'vue'

//修改元件名稱

function changestr (str)

// 這裡把allcommon目錄下的所有的元件都引入

const requirecomponent = require.

context

("@/components/allcommon"

,true

,/\.vue$/

)// 查詢同級目錄下以vue結尾的元件

const install =()

=>)}

export

default

第二步,在main,js中引入

import importall from '@/common/importall'

vue.

use(importall)

;// 註冊入全域性(這裡執行install方法)

第三步,在全域性任意元件中都可呼叫比如說在test.vue元件中,使用如下:

<

template

>

<

/a>

<

/b>

<

/div>

<

/template

>

export

default}}

<

/script>最後我們就可以隨時隨地在頁面中使用這些高頻元件,無需再手動乙個個引入了。

Vue 開發全域性元件

有時候專案中有一些元件,比如 loading toast等等,經常用到的,可以封裝好,註冊成全域性元件,這時候就要使用vue的指令 vue.extend以 toast 為例子,開發乙個 toast 全域性元件,只是簡易版的哈,彈出來然後消失那種 二 目錄結構 toast.vue 主要是寫html 以...

vue開發 vue全域性元件的方法

在vue專案中,可以自定義元件像vue resource一樣使用vue.use 方法來使用,具體實現方法 1 首先建乙個自定義元件的資料夾,比如叫loading,裡面有乙個index.js,還有乙個自定義元件loading.vue,在這個loading.vue裡面就是這個元件的具體的內容,比如 lo...

Vue 全域性loading元件開發

開發loading元件 src components loading index.vue u loading fade visible class u loading mask u loading spinner assets loading.gif u loading text p div div...