[解決済み] 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 },
})

以下は、動作中の 例 .

余談ですが Vue not found"のようなエラーが発生した場合、テストとして、フィルタをインポートしてみてください。 後 を使用します。 new Vue() のように宣言します。

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

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

import "./filters"