前端组件自动注册

前端组件自动注册

组件太多的话写一个注册一个确实有点麻烦 ，使用组件全局自动注册的方式吧。

1.创建一个js文件命名autoRegister.js

在components 里创建一个js文件命名为autoRegister.js。
当然也可以命其他名字，但最好是有语义的，方便后期维护时理解
全局自动注册组件的代码：

/**
 * 全局组件自动注册
 *
 * 全局组件各个组件按文件夹区分，文件夹名称与组件名无关联，但建议与组件名保持一致
 * 文件夹内至少保留一个文件名为 index 的组件入口，例如 index.vue
 * 普通组件必须设置 name 并保证其唯一，自动注册会将组件的 name 设为组件名，可参考 SvgIcon 组件写法（图3图4）
 * 如果组件是通过 js 进行调用，则确保组件入口文件为 index.js，可参考 myEchart 组件（图2）
 */

import Vue from 'vue'

const componentsContext = require.context('./', true, /index.(vue|js)$/)
componentsContext.keys().forEach(file_name => {
    // 获取文件中的 default 模块
    const componentConfig = componentsContext(file_name).default
    if (/.vue$/.test(file_name)) {
        Vue.component(componentConfig.name, componentConfig)
    } else {
        Vue.use(componentConfig)
    }
})

2.在main.js中引入

import Vue from 'vue'
// 全局组件自动注册
import './components/autoRegister'

3.在需要的页面用标签的方式引入

• 1.创建一个名为myEchart的图表组件：

<template>
    <div id="main" style="width:1500px;height:400px;"></div>
</template>
<script>
import * as echarts from "echarts";
console.log("引入了：", echarts);
export default {
  name: "myEchart",
  mounted() {
    var mychart = echarts.init(document.getElementById("main"));
    // 绘制图表
    mychart.setOption({
      title:{
        text:"业务变动趋势",
        subtext:"2021年度",
        left:"center",
        top:0,
        textStyle:{
          // fontsize:30
        },
         subtextStyle:{
           color:"#555"
         }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      legend: {
        top:"15%",
        right:0,
        orient:"vertical",
        data: ["新增数量", "新增金额","解除数量","解除金额", "在保数量","在保金额", "代偿数量","代偿金额", "追偿数量","追偿金额"],
      },
      xAxis: [
        {
          type: "category",
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
          axisPointer: {
            type: "shadow",
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "数量（个）",
          min: 0,
          max: 640,
          axisLabel: {
            formatter: "{value}",
          },
        },
        {
          type: "value",
          name: "金额（千元）",
          min: 0,
          max: 50000, 
          axisLabel: {
            formatter: function (value, index) {
                  return value*0.001 + 'k';
              },
          },
        },
      ],
      series: [
        {
          name: "新增数量",
          type: "bar",
          data: [
            47,
            26,
            30,
            26,
            21,
            43,
            2,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "新增金额",
          type: "line",
          yAxisIndex: 1,
          data: [
            3045,
            932,
            2391,
            1550,
            7194,
            4062,
            1710,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "解除数量",
          type: "bar",
          data: [
            0,
            0,
            5,
            0,
            1,
            1,
            0,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "解除金额",
          type: "line",
          yAxisIndex: 1,
          data: [
            0,
            0,
            100,
            0,
            1614,
            91,
            0,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "在保数量",
          type: "bar",
          data: [
            218,
            242,
            271,
            297,
            316,
            359,
            361,
            0,
            0,
            0,
            0,
            0,
          ],
        }, 
        {
          name: "在保金额",
          type: "line",
          yAxisIndex: 1,
          data: [
            21113,
            22021,
            24401,
            25951,
            31439,
            35502,
            37212,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "代偿数量",
          type: "bar",
          data: [
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "代偿金额",
          type: "line",
          yAxisIndex: 1,
          data: [
            0,
            0,
            5,
            0,
            1,
            1,
            0,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "追偿数量",
          type: "bar",
          data: [
             0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
          ],
        },
        {
          name: "追偿金额",
          type: "line",
          yAxisIndex: 1,
          data: [
            0,
            0,
            5,
            0,
            1,
            1,
            0,
            0,
            0,
            0,
            0,
            0,
          ],
        },
      ],
    });
  },
};
</script>
<style scoped>
#main {
  margin: 10px auto;
  /* background: pink; */
}
</style>

• 2.在页面里引入图表组件

<template>
  <div class="con">
  <myEchart ></myEchart>
  </div>
</template>

4.图解步骤

粗糙的图解:
图1.

图2.
myEchart 组件

5.SvgIcon 组件（在第一段代码的注释里提到的）

SvgIcon 组件写法
图3.
图4.