通常我们引入一个第三方组件形式的插件进来时，我们在main.js里面需要Vue.use(’该插件名字‘)，比如引入一个vant组件

那么我们如何自己也来尝试将自己封装的组件以Vue.use()的形式来使用呢

以往我们使用一个封装的组件可以以局部组件的方式将其引入到需要该组件的位置，该方式在需要很多地方需要的时候，需要不断引入进来，比较繁琐，这时可以用全局的方式将其引入进来

图

看效果图，这是一个不断转动的加载图

现在我们来看下官方给的利用插件形式的好处：

要想用Vue.use()的方式，首先你得将组件转换成插件的形式才可以，需要额外在src下建立一个plugin的文件夹，将自己封装的组件引入到该文件夹下（也可以不引入，引入了比较方便些），然后再建立一个index.js的文件

index.js的文件夹内容

必须先使用install的方法，官网有提到

然后再main.js的文件里注入

这样就可以使用了

如果我们不想引入组件的标签，我们可以这样使用

在界面上同样可以显示出来

Vue.use()用法的更多相关文章

  1. Vue props用法详解

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...

  2. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  3. vue better-scroll用法

    滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题. 常用效果:移动端很常见的效果,当滑动右边部分的时候,左边 ...

  4. vue之用法

    一.安装 对于新手来说,强烈建议大家使用<script>引入 二. 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. 三.使用V ...

  5. Vue 基本用法

    Vue的基本用法 模板语法{{ }} 关闭掉 django中提供的模板语法{{ }} 指令系统 v-text v-html v-show和v-if v-bind和v-on v-for v-model ...

  6. Vue基本用法

    在学习Vue的基本用法之前,我们先简单的了解一些es6的语法 let: 特点:1.局部作用域 2.不会存在变量提升 3.变量不能重复声明 const: 特点:1.局部作用域 2.不会存在变量提升 3. ...

  7. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. Vue.extend用法

    Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...

  9. vue基础用法

    vue.js是什么 vue.js也称为vue,读音/vju/ 是一个构建用户界面的框架 是一个轻量级MVVM(Model-view-viewModel)框架,和angular,react类似,其实就是 ...

  10. 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法

    1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...

随机推荐

  1. wordpress的.htaccess很容易就被挂马啊

    wordpress的.htaccess很容易就被挂马啊 修改成这样吧: # BEGIN WordPress<IfModule mod_rewrite.c>RewriteEngine OnR ...

  2. cmake以源码的方式引入第三方项目

    最前 本文将介绍一种以源码的方式引入第三方库的方法 准备 主项目,需要引用第三方库的某些函数 第三方库,以源码的形式提供给主项目使用 注意: 本文的背景:已经将第三方源码下载好. 一个例子 我这里准备 ...

  3. 【剑指Offer】二叉树的镜像 解题报告（Python）

    [剑指Offer]二叉树的镜像 解题报告(Python) 标签(空格分隔): LeetCode 题目地址:https://www.nowcoder.com/ta/coding-interviews 题 ...

  4. 【LeetCode】678. Valid Parenthesis String 解题报告（Python）

    [LeetCode]678. Valid Parenthesis String 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人 ...

  5. LeetCode118. Pascal's Triangle 杨辉三角

    题目 给定行数,生成对应的杨辉三角 思考 同一行是对称的,最大的下标为(行数+1)/2;1,1,2,3,6;下标从0开始,则对应分别为0.0.1.1.2.2 对于第偶数行,个数也是偶数,对于奇数行,个 ...

  6. 业务层面和运维层面优化你的Redis

    业务层面 key的长度尽量要短,在数据量非常大时,过长的key名会占用更多的内存; 一定避免存储过大的数据(大value),过大的数据在分配内存和释放内存时耗时严重,会阻塞主线程; Redis 4.0 ...

  7. UML的定义和组成详细介绍

    目录 1.UML 1.1概述 1.2 UML是一种建模语言 1.3 UML语言包含三方面 2.UML支持软件体系结构建模 2.1 逻辑视图 2.2 实现(开发)视图 2.3 部署视图 2.4 过程视图 ...

  8. Pycharm的界面修改与基本设置

    Pycharm的一些基本设置 设置字体大小与字体样式 首先我们打开Pycharm,点击左上角File,找到sitting 点击后就能进入设置界面 xdm,我将介绍两种更改字体的设置 方法一 设置界面找 ...

  9. MATLAB m文件编译错误之错误使用slCharacterEncoding

    错误提示: 错误使用 slCharacterEncoding (line 51) Close all block diagrams (using 'bdclose all') before tryin ...

  10. CSS基础 CSS的三大特性以及选择器优先级计算方法

    1.子元素默认会继承父元素的样式,但不是所有的元素都有继承 常见的继承父元素特点的元素有: 1.color 2.font-sytle.font-weight.font-size.font-family ...