注册全局方法，全局过滤器和全局组件

1.注册全局方法

1.1 过滤器的公共类

//全局过滤器配置
import {dateFormat} from './base/dateUtil'

export default {
    normalDateFormat : function(date,fmt){
        return dateFormat.normalFormat(date,fmt);
    },
    textDateFormat : function(text,fmt){
        return dateFormat.textDateFormat(text,fmt);
    }
}

1.2 main.js引入

import filters from '../util/com-filter';//通用filter

1.3全局过滤器注册

//全局filter注册
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})

2.通过新键插件，引入全局公共方法

2.1 新建插件文件

import Vue from 'vue'
/**定义全局通用方法 */
let commonUtil = {};

commonUtil.install = function(Vue,options){
    Vue.prototype.formatJSON = function(obj){
        return format.formatJSON(obj);
    }
    Vue.prototype.isJSON = function(str){
        return format.isJSON(str);
    }

}
Vue.use(commonUtil);
export default  commonUtil ;

2.2 main.js引入插件文件

import '../util/base/commonUtil';

　　

3.全局组件的配置

1.获取全局组件

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  '../components/common/',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /[A-Z]\w+\.(vue|js)$/
)

2.组件格式化

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

3.组件绑定vue

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 获取和目录深度无关的文件名
      fileName
        .split('/')
        .pop()
        .replace(/\.\w+$/, '')
    )
  )

 

以上就是绑定全局方法，过滤器，和组件的方法；