How to use vue.use method

Usage of the vue.use method: First install the Vue.js plug-in; then use the plug-in through the global method "Vue.use()", whose syntax is such as "vue.use(plugin, arguments)".

The operating environment of this tutorial: windows7 system, vue2.0 version, thinkpad t480 computer.

Recommendation: "vue Tutorial"

Official API introduction:

Vue.use(plugin)

The explanation given by the official website is: through the global method Vue.use() Use plugins.

vue.use（plugin, arguments）

Parameters

{Object | function} plugin

Usage

Install the Vue.js plug-in. 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.

Element-UI example

According to the ElementUI document, use ElementUI like this in a project built with 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)
});

The above code completes the introduction of Element. It should be noted that , the style file needs to be imported separately.

You can use the Element element directly in Vue's single file component using 44ca90894c9c5c4dffec4b93a1966d66abc819eb726d549244df5ee5de853a0c.

So what happened?

1. The first comment imports ElementUI

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

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

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