Vue 的插件原理

// 统一全局注册-Vue.use -Vue 插件机制

// Vue.use 注册全局组件

// Vue 插件机制的原理是什么：本质上插件就是一个对象，在对象里面调用install 方法 

(下面的代码在：src/components/PageTools/index.vue) -组件

<template>

  <div class="page-tools">

    <!-- 封装一个通用 工具栏供大家使用 -->

    <!-- 左侧 -->

    <div class="left">

      <div class="tips">

        <i class="el-icon-info" />

        <slot name="left" />

      </div>

    </div>

    <!-- 右侧 -->

    <div class="right">

      <slot name="right" />

    </div>

  </div>

</template>

<script>

export default {

  name: 'PageTools'

}

</script>

<style lang="scss" scoped>

.page-tools {

  display: flex;

  justify-content: space-between;

  align-items: center;

  .tips {

    line-height: 34px;

    padding: 0px 15px;

    border-radius: 5px;

    border: 1px solid rgba(145, 213, 255, 1);

    background: rgba(230, 247, 255, 1);

    i {

      margin-right: 10px;

      color: #409eff;

    }

  }

}

</style>

（下面的代码在：src/components/index）--抽离出注册组件的方法

import PageTools from './PageTools'

export default {

  install(Vue) {

    Vue.component('PageTools', PageTools)

  }

}

(下面的代码在：src/main.js) -批量注册组件

// 注册一个通用的工具栏 -全局注册有两种方式1.都堆在main.js中，第二种：抽离成一个单独的.vue文件，然后全部导入

// 方式1

// import PageTools from '@/components/PageTools'

// Vue.component('PageTools', PageTools)

// 方式2

import Components from '@/components/index'

Vue.use(Components)

(使用组件:在需要使用组件的时候，跟平时使用一样）-使用组件

<组件名1></组件名1>

<组件名2></组件名2>