如何在Vue.js中添加一堆全局过滤器？

我想在 Vue.js 应用程序中使用一些全局过滤器。我知道我需要在主 Vue 实例之前定义它们，但从代码组织的角度来看，将它们全部放在“main.js”文件中对我来说似乎并不正确。我怎样才能将定义放在一个单独的文件中，导入到“main.js”中？我无法完全理解导入/导出的内容。

创建一个filters.js 文件。

import Vue from "vue"

Vue.filter("first4Chars", str => str.substring(0, 4))
Vue.filter("last4Chars", str => str.substring(str.length - 4))

将其导入到您的 main.js 中。

import Vue from 'vue'
import App from './App'
import "./filters"

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

这是一个工作example https://codesandbox.io/s/mqwv333zr8.

边注：如果您收到“Vue not found”类型的错误，请尝试导入过滤器作为测试after the new Vue()声明，像这样：

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
})

import "./filters"