How to use vue.use

How to use vue.use: First open the corresponding code file; 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: Windows 7 system, vue version 2.0, Dell G3 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 .

So what happened?

1. The first comment is to import 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. The second comment is to install ElementUI

Vue.use(ElementUI);

We observed that the Vue.use method is used here and the ElementUI The 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. For more information, please follow other related articles on the PHP Chinese website!