So verwenden Sie die vue.use-Methode

Verwendung der vue.use-Methode: Installieren Sie zuerst das Vue.js-Plugin und verwenden Sie dann das Plug-in über die globale Methode „Vue.use()“, deren Syntax beispielsweise „vue.use(plugin, Argumente)“.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue2.0-Version, Thinkpad T480-Computer.

Empfohlen: „vue Tutorial“

Offizielle API-Einführung:

Vue.use(plugin)

Die Erklärung auf der offiziellen Website lautet: Verwenden Sie das Plug-in über die globale Methode Vue.use().

vue.use（plugin, arguments）

Parameter

{Object | function} plugin

Verwendung

Installieren Sie das Vue.js-Plugin. Wenn das Plugin ein Objekt ist, muss die Installationsmethode bereitgestellt werden. Wenn das Plugin eine Funktion ist, fungiert es als Installationsmethode. Beim Aufruf der Installationsmethode wird Vue als Parameter übergeben.

Diese Methode muss aufgerufen werden, bevor New Vue() aufgerufen wird.

Wenn die Installationsmethode mehrmals vom selben Plug-in aufgerufen wird, wird das Plug-in nur einmal installiert.

Element-UI-Beispiel

Verwenden Sie ElementUI gemäß dem ElementUI-Dokument wie folgt in einem mit Vue cli erstellten Projekt.

/*
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)
});

Der obige Code vervollständigt die Einführung von Element. Es ist zu beachten, dass die Stildatei separat importiert werden muss .

Sie können Element-Elemente später direkt in der Einzeldateikomponente von Vue verwenden, indem Sie verwenden.

Was genau ist passiert?

1. Der erste Kommentar wird in ElementUI importiert

import ElementUI from 'element-ui'
// TODO 理解如何导入模块

Das Folgende ist der Inhalt von src/index.js. Wie Sie sehen, exportiert index.js ein Objekt. In der obigen Importanweisung erhält dieses Objekt den Variablennamen ElementUI. Bitte beachten Sie hier die Install-Funktion.

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

2. Der zweite Kommentar ist die Installation von ElementUI

Vue.use(ElementUI);

Wir haben festgestellt, dass hier die Vue.use-Methode verwendet und das ElementUI-Objekt übergeben wird. Aus der Vue.use-Dokumentation können wir erkennen, dass dadurch die Installationsmethode des ElementUI-Objekts aufgerufen und an Vue übergeben wird.

// 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;
};

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die vue.use-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!