通常我们引入一个第三方组件形式的插件进来时，我们在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. 【LeetCode】1. Two Sum 两数之和

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 个人公众号:负雪明烛 本文关键词:two sum, 两数之和,题解,leetcode, 力 ...

  2. 【LeetCode】794. Valid Tic-Tac-Toe State 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/valid-ti ...

  3. 【LeetCode】713. Subarray Product Less Than K 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/subarray ...

  4. 【LeetCode】382. Linked List Random Node 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 数组保存再随机选择 蓄水池抽样 日期 题目地址:ht ...

  5. 【LeetCode】684. Redundant Connection 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 并查集 日期 题目地址:https://leetco ...

  6. capstoneCS5213|HDMI转VGA带DAV模拟音频输出转换器|CS5213方案

    capstone CS5213是一款HDMI到VGA转换器结合了HDMI输入接口和模拟RGB DAC输出且带支持片上音频数模转换器.CS5213芯片设计简单,整体芯片尺寸精悍,外围电路集成优化度较高, ...

  7. Java初学者作业——实现控制台的猜数字游戏。游戏运行时产生一个1～100之间的随机数字

    返回本章节 返回作业目录 需求说明: (1)实现控制台的猜数字游戏.游戏运行时产生一个1-100之间的随机数字 (2)要求用户从控制台输入数字,若输入的数字比随机数小,则输出"太小了,再大一 ...

  8. Java练习小题_猴子吃桃问题分别用for循环和while循环实现程序。

    要求说明: 猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个第二天早上又将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一半零一个.到第10天早上想再吃时, ...

  9. 编写Java程序，编写自定义异常类封装将棋子落在格子中已有棋子的异常

    返回本章节 返回作业目录 需求说明: 完善控制台版五子棋,判断用户所下棋子的位置,是否已经存在棋子,如果已经存在,则抛出用户自定义异常,提示用户该位置已经有棋子. 实现思路: 创建用户自定义异常类Go ...

  10. 使用.NET 6开发TodoList应用(21)——实现API版本控制

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 API接口版本管理,对于一些规模稍大的企业应用来说,是经常需要关注的一大需求.尽管我们的示例程序TodoList很简单,但是我 ...