So verwenden Sie vue.use

So verwenden Sie vue.use: Öffnen Sie zunächst die entsprechende Codedatei. Verwenden Sie dann das Plug-in über die globale Methode „Vue.use()“, deren Syntax beispielsweise „vue.use(plugin, arguments)“ lautet.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.0, Dell G3-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 ist, ElementUI zu importieren

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. Der zweite Kommentar ist, ElementUI zu installieren

Vue.use(ElementUI);

Wir haben festgestellt, dass hier die Vue.use-Methode verwendet und das ElementUI-Objekt übergeben wird. Der Vue.use-Dokumentation können Sie entnehmen, 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 vue.use. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!