What is vue.use?

vue.use is an official API, which is a method to globally register a component or plug-in. If the plug-in is an object, the install method must be provided; if the plug-in is a function, it will be used as the install method. This method needs to be called before calling "New Vue()".

The operating environment of this tutorial: Windows 7 system, Vue version 2.9.6. This method is suitable for all brands of computers.

Official API introduction:

Vue.use(plugin)

Parameters

{Object | function} plugin

Usage

Install the Vue.js plugin. If the plugin is an object, the install method must be provided. If the plugin is a function, it will act as the install method. When the install method is called, Vue will be passed in as a parameter.

This method needs to be called before calling New Vue().

When the install method is called multiple times by the same plug-in, the plug-in will only be installed once.

Usage of Vue.use

Element-UI example

According to the ElementUI documentation, in In the project built by Vue cli, the above code is used to complete the introduction of Element using 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)
});

. It should be noted that the style file needs to be introduced separately.
Later, you can directly use to use the Element element in Vue's single-file component.
So what happened?

1. The first comment imports ElementUI

import ElementUI from 'element-ui'

// TODO Understand how to import the module

The following is the content of src/index.js. As you can see, index.js exports an object. In the above import statement, this object is given the variable name of ElementUI. Please note the install function here.

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

2. The second comment is to install ElementUI

Vue.use(ElementUI);

We observed that the Vue.use method is used here and the ElementUI object is passed in. From the Vue.use documentation, you can tell that this calls the install method of the ElementUI object and passes in 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;

};

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of What is vue.use?. For more information, please follow other related articles on the PHP Chinese website!