vue.use是什么呀?

发布时间:2022-05-22 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue.use是什么呀?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

Vue.use是一个官方API,是全局注册一个组件或者插件的方法,如果插件(plugin)是一个对象,必须提供install方法;如果插件是一个函数,它会作为install方法。该方法需要在调用“New Vue()”之前被调用。

vue.use是什么呀?

本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌脑。

官方API介绍:

Vue.use(plugin)

参数

{Object | function} plugin

用法

安装Vue.js 插件。如果插件(plugin)是一个对象,必须提供install方法。如果插件是一个函数,它会作为install方法。install方法调用时,会将Vue作为参数传入。

该方法需要在调用New Vue()之前被调用。

当install方法被同一个插件多次调用,插件将只会被安装一次。

Vue.use的使用

Element-UI例子

根据ElementUI文档,在vue cli搭建的项目中这样使用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)
});

以上代码便完成了Element的引入,需要注意的是,样式文件需要单独引入。
后面就可以在Vue的单文件组件中直接使用<el-xxx></el-xxx>来使用Element元素。
所以这到底发生了什么?

1、第一处注释导入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、第二处注释安装ElementUI

Vue.use(ElementUI);

我们观察到这里使用了Vue.use方法并将ElementUI这个对象传入。从Vue.use文档中可以得知,这会调用ElementUI对象的install方法,并将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;

};

更多编程相关知识,请访问:编程视频!!

以上就是vue.use是什么呀?的详细内容,更多请关注脚本宝典其它相关文章

脚本宝典总结

以上是脚本宝典为你收集整理的vue.use是什么呀?全部内容,希望文章能够帮你解决vue.use是什么呀?所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:VueVue.use