Comment utiliser vue.use

Comment utiliser vue.use : Ouvrez d'abord le fichier de code correspondant ; puis utilisez le plug-in via la méthode globale "Vue.use()", dont la syntaxe est telle que "vue.use(plugin, arguments)".

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.0, ordinateur Dell G3.

Recommandé : "tutoriel vue"

Introduction officielle de l'API :

Vue.use(plugin)

L'explication donnée par le site officiel est : via la méthode globale Vue. use() Utiliser des plugins.

vue.use（plugin, arguments）

Paramètres

{Object | function} plugin

Utilisation

Installez le plug-in Vue.js. Si le plugin est un objet, la méthode d'installation doit être fournie. Si le plugin est une fonction, il fera office de méthode d'installation. Lorsque la méthode d'installation est appelée, Vue sera transmise en paramètre.

Cette méthode doit être appelée avant d'appeler New Vue().

Lorsque la méthode d'installation est appelée plusieurs fois par le même plug-in, le plug-in ne sera installé qu'une seule fois.

Exemple Element-UI

Selon le document ElementUI, utilisez ElementUI comme celui-ci dans un projet construit avec Vue cli

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

Le code ci-dessus complète l'introduction d'Element It. Il convient de noter que le fichier de style doit être importé séparément.

Plus tard, vous pourrez utiliser directement 44ca90894c9c5c4dffec4b93a1966d66abc819eb726d549244df5ee5de853a0c dans le composant monofichier de Vue pour utiliser l'élément Element.

Alors que s'est-il passé ?

1. Le premier commentaire importe 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 Le deuxième commentaire installe ElementUI

Vue.use(ElementUI);

Nous avons observé que la méthode Vue.use est utilisée ici et l'objet ElementUI. est transmis. D'après la documentation Vue.use, nous pouvons dire que cela appelle la méthode d'installation de l'objet ElementUI et passe dans 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;
};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!