Vue.use()的用法

介紹

在

vue

的

main。js

中，我們經常使用

Vue。use（xx）

方法。比如我們引入

elementUI

，在

main。js

中，我們一般透過如下程式碼引入：

import

ElementUI

from

‘element-ui’

import

‘element-ui/lib/theme-chalk/index。css’

Vue

。

use

（

ElementUI

）

［alt type=“error”］需要先透過

npm i element-ui -S

安裝

elementUI

［/alt］ 原來在開發時，一直都是這麼用，但是基本沒留意過為什麼這麼弄。

官方解釋

安裝 Vue。js 外掛。如果外掛是一個物件，必須提供 install 方法。如果外掛是一個函式，它會被作為 install 方法。install 方法呼叫時，會將 Vue 作為引數傳入。什麼意思呢？

Vue。use（）

中的引數必須是一個

function

函式或者是一個

Object

物件，如果是物件的話，必須在物件中提供一個

install

方法。之後會將

Vue

作為引數傳入。我們分兩點來看：

1。

如果

Vue。use（）

中的引數是一個

function

函式，那麼函式的引數是

Vue

物件。

2。

如果

Vue。use（）

中的引數是一個

Object

物件，那麼這個物件必須提供一個

install

方法，

install

方法的引數就是

Vue

。

Demo演示

我們透過以下兩個Demo來分別演示一下上面說的兩種情況。

Object

物件

我們透過自定義一個主鍵的形式進行演示說明。

建立專案

vue init webpack

-

simple custom

-

global

-

component

一路回車，然後執行

npm run dev

如果專案能正常啟動代表建立成功。

建立元件

建立

components

資料夾，並建立

loading。vue

及

index。js

檔案。目錄結構如下

04803-vj9ib9nv1ta。png

loading。vue

只是一個簡單的元件，程式碼如下

在

`index。js`

，我們引入並註冊定義的元件。

```java

import

LoadingComponent

from

‘。/loading。vue’

const

Loading

=

{

install

：

function

（

Vue

）{

Vue

。

component

（

‘Loading’

，

LoadingComponent

）

}

}

export

default

Loading

在

main。js

中透過

Vue。use（）

呼叫。

import

Loading

from

‘。/components/loading’

Vue

。

use

（

Loading

）

使用

在

App。vue

中使用我們的元件。

94899-6bimcvyw6h4。png

function

函式

建立函式

function

demo

（

Vue

）{

console

。

log

（

Vue

）

}

export

default

demo

引入

在

main。js

中引入函式。

```java import demo from ‘。/utils/func’

Vue。use（demo） ``

測試

開啟控制檯，檢視呼叫。

29204-ejhlsvz5ie。png