vue.use是什麼呀？

vue.use是一個官方API，是全域註冊元件或外掛程式的方法，如果外掛程式（plugin）是一個對象，必須提供install方法；如果外掛程式是函數，它會作為install方法。該方法需要在呼叫“New Vue()”之前被呼叫。

本教學操作環境：windows7系統、Vue2.9.6版，此方法適用於所有品牌電腦。

官方API介紹：

Vue.use(plugin)

參數

{Object | function} plugin

用法

安裝Vue.js 外掛程式。如果插件(plugin)是一個對象，必須提供install方法。如果插件是一個函數，它會作為install方法。 install方法呼叫時，會將Vue當作參數傳入。

該方法需要在呼叫New Vue()之前被呼叫。

當install方法被同一個插件多次調用，插件將只會被安裝一次。

Vue.use的使用

#Element-UI例子

根據ElementUI文檔，在Vue cli搭建的專案中這樣使用ElementUI

/*
mian.js
*/
import Vue from 'vue';
import ElementUI from 'element-ui'; // 1
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI); // 2

new Vue({
el: '#app',
render: h => h(App)
});

以上程式碼便完成了Element的引入，需要注意的是，樣式檔案需要單獨引入。
後面就可以在Vue的單一檔案元件中直接使用44ca90894c9c5c4dffec4b93a1966d66abc819eb726d549244df5ee5de853a0c來使用Element元素。
所以這到底發生了什麼事？

1、第一個註解導入ElementUI

import ElementUI from 'element-ui'

// TODO 理解如何導入模組

以下是src/index.js的內容。可以看到，index.js導出了一個對象，在上面的import語句中，這個物件被賦予ElementUI的變數名稱。請注意到這裡的install函數。

/*
index.js
*/
export default {
  version: '2.11.1',
  locale: locale.use,
  i18n: locale.i18n,
  install,
  ...
};

2、第二處註解安裝ElementUI

Vue.use(ElementUI);

我們觀察到這裡使用了Vue.use方法並將ElementUI這個物件傳入。從Vue.use文件中可以得知，這會呼叫ElementUI物件的install方法，並將Vue傳入。

// install函数
const install = function(Vue, opts = {}) {
 locale.use(opts.locale);
 locale.i18n(opts.i18n);

// 安装组件：通过Vue.component声明全局组件，所以我们能够直接使用而不需要声明
 components.forEach(component => {
   Vue.component(component.name, component);
 });

 Vue.use(InfiniteScroll);
 Vue.use(Loading.directive);

// 在Vue的原型链上做一些小动作所以所有的Vue实例都可以访问到这些生命的变量
// 变量名使用$开头表明这是公共API属性或者方法，这是一种约定。
 Vue.prototype.$ELEMENT = {
   size: opts.size || '',
   zIndex: opts.zIndex || 2000
 };

// ok，这里我们看到了许多用于提示的组件都设定在Vue原型链上，所以我们可以在Vue实例内部直接使用this.$alert
 Vue.prototype.$loading = Loading.service;
 Vue.prototype.$msgbox = MessageBox;
 Vue.prototype.$alert = MessageBox.alert;
 Vue.prototype.$confirm = MessageBox.confirm;
 Vue.prototype.$prompt = MessageBox.prompt;
 Vue.prototype.$notify = Notification;
 Vue.prototype.$message = Message;

};

更多程式相關知識，請造訪：程式設計影片！ ！

以上是vue.use是什麼呀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！