vue 全家桶（六）全局注册过滤器filter和全局注册组件

       虽然在main.js中使用 Vue.filter()和Vue.component() 就可以实现全局注册的问题，但是注册全局组件是挂载在Vue对象下，也就是全写在main.js中咯，那会不会多了点，本文主要是提供一个小优雅的方案咯。

一. 全局注册过滤器

 1. src>assets>js 下创建一个filters.js文件，写下我们全局的过滤器，然后将其抛出。

//事件过滤器
let formatDate = function (date, fmt){
  if(typeof(date)!='Date'){
    date = new Date(date);
  }
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  };
  for (let k in o) {
    if (new RegExp(`(${k})`).test(fmt)) {
      let str = o[k] + '';
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
    }
  }
  return fmt;
};

function padLeftZero(str) {
  return ('00' + str).substr(str.length);
}

//用于处理浮点数小数位数
let toFixed = function(input,num){
  return Number(input).toFixed(num);
};

//加密电弧号码  185****2563
let privateMobile = function(mobile){
  if (mobile) {
    return mobile.replace(/(\d{3})\d{3,4}(\d{3,4})/, '$1****$2');
  }
};

export default {
  formatDate,
  toFixed,
  privateMobile
}

  2.在main.js中注册

//全局统一注册自定义过滤器
import filters from "./assets/js/filters"
Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

二 . 全局注册组件

   1.使用上述同样的方法:

//components.js下
import star from '@/components/star.vue';
import backTop from '@/components/backTop.vue';
 
export default{
 star:star,
 backTop :backTop 
}

//main.js下
import components from './assets/js/components';
 
Object.keys(components).forEach(key => {
 Vue.component(key,components[key]);
})

 2.或者

  在components文件夹下新建globalComponent.js

   

globalComponent.js 内容

import Vue from 'vue';

//首字母大写
function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

//找到components文件夹下以.vue命名的文件
const requireComponent = require.context(
  '.', false, /\.vue$/
);

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName);

  //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
  );

  Vue.component(componentName, componentConfig.default || componentConfig);
});

main.js中只需引入globalComponent.js

import './components/globalComponent.js' ;