13518219792
这篇文章给大家分享的是有关vue.use的使用方法的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
成都创新互联专注于企业全网整合营销推广、网站重做改版、迎泽网站定制设计、自适应品牌网站建设、html5、商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为迎泽等各大城市提供网站开发制作服务。
vue.use的使用方法：首先打开相应的代码文件；然后通过全局方法“Vue.use()”使用插件，其语法如“vue.use（plugin, arguments）”。
官方API介绍：
Vue.use(plugin)
官网给出的解释是: 通过全局方法 Vue.use() 使用插件。
vue.use（plugin, arguments）
参数
{Object | function} plugin用法
安装Vue.js 插件。如果插件(plugin)是一个对象，必须提供install方法。如果插件是一个函数，它会作为install方法。install方法调用时，会将Vue作为参数传入。
该方法需要在调用New Vue()之前被调用。
当install方法被同一个插件多次调用，插件将只会被安装一次。
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的单文件组件中直接使用
所以这到底发生了什么？
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的使用方法就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
