写到这里的时候，可能很多人都会觉得，全局注册filter和全局组件组件不是很简单吗，直接Vue.filter()和Vue.component()不久解决了吗，其实这么讲也没错，但是你可曾想过，注册全组件是挂载在Vue对象下的，这意味这按照正常思路，我们要写在main.js文件下，这样就会造成，我们所写的mian文件过于冗长，你可以想一下，把全局的过滤器，和组件都写进去，着实丑陋，很不优雅，下面跟大家说一个优雅的实现方法：
首先，我们在src>assets目录下新建一个js文件夹，再该文件夹下再创建一个filters.js的文件，如下图：
接下来，我们在filters.js文件下写我们的全局过滤器，再将其抛出，写一个时间过滤器作为例子：
const fullTime = val => {
var dateObj = new Date(Number(val));
var year = dateObj.getFullYear();
var month =
dateObj.getMonth() + 1 > 9
? (dateObj.getMonth() + 1).toString()
: "0" + (dateObj.getMonth() + 1).toString();
var date =
dateObj.getDate() > 9
? dateObj.getDate().toString()
: "0" + dateObj.getDate().toString();
var hour =
dateObj.getHours() > 9
? dateObj.getHours().toString()
: "0" + dateObj.getHours().toString();
var minutes =
dateObj.getMinutes() > 9
? dateObj.getMinutes().toString()
: "0" + dateObj.getMinutes().toString();
return year + "/" + month + "/" + date + " " + hour + ":" + minutes;
};
module.exports={
fullTime
}
做完这一步，其实我们的过滤器还没写完，还需要在main.js中写一个注册函数：
import Vue from 'vue'
import App from './App'
import router from './router'
import filters from './assets/js/filters'
import 'iview/dist/styles/iview.css';
Object.keys(filters).forEach(key =>{
Vue.filter(key,filters[key])
})
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
这样，我们就把filters文件下的过滤器函数注册到Vue全局下，同样道理，我们可以按照同样的思路注册全局组件，我们在src>assets>js下新建一个components.js文件，在其中引入我们想注册的全局组件，export出一个对象，使用Object.keys获取后注册到全局下：
//components.js下
import testInput from '@/components/testInput.vue'
export default{
testInput:testInput
}
//main.js下
import components from './assets/js/components'
Object.keys(components).forEach(key => {
Vue.component(key,components[key])
})
优雅的注册全局组件和全局过滤器已经讲完，接下来就是API管理阶段了。