vue.use怎么用


本文摘自PHP中文网,作者藏色散人,侵删。

vue.use的使用方法:首先打开相应的代码文件;然后通过全局方法“Vue.use()”使用插件,其语法如“vue.use(plugin, arguments)”。

本教程操作环境:windows7系统、vue2.0版,Dell G3电脑。

推荐:《vue教程》

官方API介绍:

1

Vue.use(plugin)

官网给出的解释是: 通过全局方法 Vue.use() 使用插件。

1

vue.use(plugin, arguments)

参数

1

{Object | function} plugin

用法

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

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

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

Element-UI例子

根据ElementUI文档,在Vue cli搭建的项目中这样使用ElementUI

1

2

3

4

5

6

7

8

9

10

11

12

/*

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

1

2

3

4

5

6

7

8

9

10

11

12

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

1

Vue.use(ElementUI);

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

// 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如何实现局部刷新?(代码示例)

浅析vue创建组件的几种方式

vue中iview是什么?

vue配什么ui框架比较好

15道vue常见面试题解析

分享一个vue全局配置的实例代码

vue 的 render 方法中 h 是什么?

vue style中使用data中的变量的方法详解

vue.js能做轮播图吗

vue treeselect树形下拉框之获取选中节点的ids和lables操作

更多相关阅读请进入《vue》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...