vue install 注册全局组件方式

目录
  • vue install注册全局组件
    • 1.首先先建立一个公用的组件
    • 2.新建一个install.js文件
    • 3.在main.js文件中注册
    • 4.在页面中使用
  • vue插件的install方法

vue install注册全局组件

项目中的有些组件使用的频率比较高，这时候我们可以注册全局的组件，这样就不用每次使用的组件的时候一次次的导入

具体使用的步骤如下

一般会把这个常用的组件在main.js文件中注册好

1.首先先建立一个公用的组件

// Cmponent.vue 公用的组件
<template>
    <div>
        我是组件
    </div>
</template>
<script>
    export default { 
    }
</script>
<style scoped>
    div{
        font-size:40px;
        color:#fbb;
        text-align:center;
    }
</style>

2.新建一个install.js文件

import component from './Cmponent.vue'
const component = {
    install:function(Vue){
        Vue.component('component-name',component)
    }  //'component-name'这就是后面可以使用的组件的名字，install是默认的一个方法 component-name 是自定义的，我们可以按照具体的需求自己定义名字
}
// 导出该组件
export default component

3.在main.js文件中注册

// 引入组件
import install from '@plugins/install'; 
// 全局挂载utils
Vue.use(install);

4.在页面中使用

<template>
   <div>
      <component-name></component-name>
   </div>    
</template>

vue插件的install方法

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}
import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

这里注意的就是vue插件的使用方法，通过全局方法 Vue.use() 使用插件。

插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：添加全局方法或者属性；添加全局资源：指令/过滤器/过渡等；通过全局 mixin 方法添加一些组件选项；添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

了解vue插件的install方法对我们写大型项目有很大帮助。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 组件 全局注册和局部注册的实现

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content

  • vue 实现基础组件的自动化全局注册

    vue 实现基础组件的自动化全局注册

    参考官网:https://cn.vuejs.org/v2/guide/components-registration.html 在日常开发中,有一些组件是比较常用,但是为了避免在开发过程中不停地引入,或者在main.js中注册,,或者每添加一个组件就需要手动注册一次.则直接进行自动化全局注册. 自动化全局注册,官网上都详细的说明,以下是自己官网的说明基础上进行了一个demo开发实例: 1.自定义文件夹: 在src下新建一个components文件夹,用于存放组件.并新建一个用于存放需要自动化全局

  • Vue封装的组件全局注册并引用

    Vue封装的组件全局注册并引用

    当vue接触的多了之后,你可能也会到自己封装组件的程度,试想每个页面的功能级模块全部拆分成组件,然后后续请求后台数据传入进去或者自己模拟数据,是多么方便的一件事情. 每当我们需要修改的时候,只需维护那一个功能性组件即可,不需要这个功能了,只需要从页面中删除这个组件的引用即可. 那么废话不多说了,我们来看看如何全局注册并一键引入(类似于element ui的全部引入). 如何封装组件就不多赘述了. 参考vue官网的做法:vue官网全局注册 1.正则判断路径以及文件名,获取全部组件并全局注册(可以直

  • Vue组件全局注册实现警告框的实例详解

    Vue组件全局注册实现警告框的实例详解

    外部引入 <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script

  • vue install 注册全局组件方式

    目录 vue install注册全局组件 1.首先先建立一个公用的组件 2.新建一个install.js文件 3.在main.js文件中注册 4.在页面中使用 vue插件的install方法 vue install注册全局组件 项目中的有些组件使用的频率比较高,这时候我们可以注册全局的组件,这样就不用每次使用的组件的时候一次次的导入 具体使用的步骤如下 一般会把这个常用的组件在main.js文件中注册好 1.首先先建立一个公用的组件 // Cmponent.vue 公用的组件 <template

  • Vue自动化注册全局组件脚本分享

    Vue自动化注册全局组件脚本分享

    目录 自动化注册全局组件 放代码 vue组件注册–全局注册 使用require.context实现前端工程自动化(实现全局组件自动化注册的js脚本) 基本思路 使用场景 自动化注册全局组件 今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比如components下的文件,自动完成全局化注册,想起来就很帅 放代码 export function au

  • VUE注册全局组件和局部组件过程解析

    这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'

  • Vue触发式全局组件构建的方法

    Vue触发式全局组件构建的方法

    前言 在开发中总会遇到一些全局组件,如果通过import导入,components挂载就显得冗余,而一些UI框架(诸如 elementUi.iview等)通过调用触发的形式就显得很便捷,本文就是简单的构建一个类似组件 背景 前几月公司开发一个小程序后台管理系统,客户可以通过在pc后台管理系统中定制自己的微信小程序,包括结构更改.数据上传等,通过将页面结构抽象成数据的方法,自由控制小程序的展示方式(横向抽出每个模块) 而这其中频繁使用到图片上传,每个模块都得使用,无论是cv大法还是import都显

  • Vue 实现创建全局组件,并且使用Vue.use() 载入方式

    自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from 'module' 导入,在components中注册 <template> <div class="app-NewsInfo"> <h3>{{info.title}}</h3> <!-- 新闻评论子组件. --> <comment :id="id"></comment&

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • Vue中自定义全局组件的实现方法

    前言 有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.今天就解决了一个长期困扰着我的问题,现在记录一下,供日后参考. 涉及知识点是Vue.js官网教程中的插件使用 方法如下: 首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用.这无疑增加了许多代码重复. 而在使用Vue.js的一些UI框架的时候则注意到,只需要在项目的入口文件中import这个插件然后在接着Vue.use('插件名').这样

  • .html页面引入vue并使用公共组件方式

    目录 .html页面引入vue并使用公共组件 问题描述 解决办法 目录结构 vue公共组件框架搭建 步骤详述 总结 .html页面引入vue并使用公共组件 问题描述 整体项目采用传统 .html 文件搭建,vue仅作为渲染数据工具使用,需要使用的地方使用 <script> 标签引入. 现有数个页面,每个页面都包含相同 header 和 footer ,希望可以把 header 和 footer 提取出来,避免太多重复代码. 解决办法 公共部分写在 .js 文件里,本质就是在当前页面中写的公共组

  • 最简单的vue消息提示全局组件的方法

    简介 实现功能 自定义文本 自定义类型(默认,消息,成功,警告,危险) 自定义过渡时间 使用vue-cli3.0生成项目 toast全局组件编写 /src/toast/toast.vue <template> <div class="app-toast" v-if="isShow" :class="{'info': type=== 'info','success': type=== 'success','wraning': type===

  • vue动态注册组件实例代码详解

    写本篇文章之前其实也关注过vue中的一个关于加载动态组件is的API,最开始研究它只是用来实现一个tab切换的功能,使用起来也蛮不错的. is 预期:string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作. 示例: <!-- 当 `currentView` 改变时,组件也跟着改变 --> <component v-bind:is="currentView"></component> 详见vue API中关于

随机推荐