通常我们引入一个第三方组件形式的插件进来时，我们在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. C++ 11新特性：std::future & std::shared_future) （转载）

    上一讲<C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)>主要介绍了 <future> 头文件中的 std::pack ...

  2. 我写了个IDEA开源插件，vo2dto 一键生成对象转换

    让人头疼的对象转换 头炸,po2vo.vo2do.do2dto,一堆对象属性,取出来塞进来.要不是为了 DDD 架构下的各个分层防腐,真想一竿子怼下去. 那上 BeanUtils.copyProper ...

  3. linux(centos)系统安装activemq

    activemq是消息中间件,可以用来 解耦.消峰.异步 需要先安装jdk环境:https://www.cnblogs.com/pxblog/p/10512886.html 1.下载文件 (也可以直接 ...

  4. Spring Boot去掉浏览器默认的叶子图标

    在Spring Boot的配置文件application.properites中添加配置项,可以关闭默认的Favicon spring.mvc.favicon.enabled=false

  5. 【LeetCode】310. Minimum Height Trees 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 BFS 相似题目 参考资料 日期 题目地址:http ...

  6. 【LeetCode】765. Couples Holding Hands 解题报告（Python）

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

  7. 【LeetCode】60. Permutation Sequence 解题报告（Python & C++）

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

  8. 解决"The remote SSH server rejected X11 forwarding request"问题

    今天突然想起来好久没有登录我的vps了,于是下载了xshell,填入地址登录后,看到提示"WARNING! The remote SSH server rejected X11 forwar ...

  9. 强强联袂！腾讯云TDSQL与国双战略签约，锚定国产数据库巨大市场

    日前,腾讯云计算(北京)有限责任公司与北京国双科技有限公司签署了<国产数据库产品战略合作协议>,双方将在数据库技术方面展开深度合作,通过分布式交易型数据库的联合研发.产品服务体系建设.品牌 ...

  10. rapidjson解析与构造实例

    void rapidjson1(){ rapidjson::StringBuffer s; rapidjson::Writer<rapidjson::StringBuffer> write ...