vue.use方法怎么用

PHP中文网 • 2025年3月13日 05:43:42 • 编程技术 • 阅读 2

vue.use方法的使用：首先安装Vue.js插件；然后通过全局方法“Vue.use()”使用插件，其语法如“vue.use(plugin, arguments)”。

本教程操作环境：windows7系统、vue2.0版本、thinkpad t480电脑。

推荐：《vue教程》

官方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'; // 1import 'element-ui/lib/theme-chalk/index.css';import App from './App.vue';Vue.use(ElementUI); // 2new Vue({el: '#app',render: h => h(App)});

登录后复制

以上代码便完成了Element的引入，需要注意的是，样式文件需要单独引入。

后面就可以在Vue的单文件组件中直接使用来使用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方法怎么用的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3021182.html