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+$/, '') ) )
以上就是绑定全局方法,过滤器,和组件的方法;