注册全局组件

src/components/PageTools/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-card class="page-tools">
+    <el-row type="flex" justify="space-between" align="middle">
+      <el-col>
+        <div v-if="showBefore" class="before">
+          <i class="el-icon-info" />
+          <!-- 定义前面的插槽 -->
+          <slot name="before" />
+        </div>
+      </el-col>
+      <el-col>
+        <el-row type="flex" justify="end">
+          <!-- 定义后面的插槽 -->
+          <slot name="after" />
+        </el-row>
+      </el-col>
+    </el-row>
+  </el-card>
+</template>
+
+<script>
+export default {
+  props: {
+    showBefore: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang='scss'>
+ .page-tools {
+    margin: 10px 0;
+    .before {
+      line-height: 34px;
+    i {
+      margin-right: 5px;
+      color: #409eff;
+    }
+    display: inline-block;
+    padding: 0px 10px;
+    border-radius: 3px;
+    border: 1px solid rgba(145, 213, 255, 1);
+    background: rgba(230, 247, 255, 1);
+  }
+ }
+</style>

src/components/index.js

@@ -0,0 +1,10 @@
+// 该文件负责所有的公共的组件的全局注册   Vue.use
+import PageTools from './PageTools'
+export default {
+  // 为vue准备的第三方包, 必须有install方法
+  // 这里方法可以自动接收一个形参, 就是Vue包
+  install(Vue) {
+    //  注册全局的通用栏组件对象
+    Vue.component('PageTools', PageTools)
+  }
+}

src/main.js

@@ -16,6 +16,9 @@ import router from './router'
 import '@/icons' // icon
 import '@/permission' // permission control
 
+import Component from '@/components'
+Vue.use(Component)
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api