vueコンポーネントで通常のjavascriptファイルを使用しますか？

Question

私はHelper.jsというファイルをいくつかのライブラリを使用する機能を持っている。 今、私はTestComponent.vueファイルを持っていて、このヘルパー関数を使いたいと思っています。この機能をどのように注入できますか？

Helper.jsで使用されているライブラリをComponentsブロックで直接使用しようとしましたが、index.htmlのタグの順序に関係なくライブラリが含まれる前にvueが実行されているようです。

どのように私はあなたが単にテンプレートのスクリプトタグにインポートすることができVueのテンプレート内で追加のライブラリやヘルパー関数を使用するためには.jsファイルや他のライブラリ

Answer 1

使用することができます。

TestComponent.vue

を

<template> 
<!-- template markup --> 
</template> 

<script> 
import Helper from 'relative/path/to/Helper.js' 
// or just a helper function (that should be exported accordingly 
import { helperFunction } from 'relative/path/to/Helper.js' 

export default { 
    name: 'TestComponent' 
    // component data, methods, etc are now able to use imported variables 
} 
</script> 

このようにして、コンポーネント内に追加のJSを使用できます。 Webpackはそれをバンドルに含めます。しかし、ライブラリが多くのコンポーネントで使用されている場合は、インポートを維持または繰り返すことは不快になる可能性があります。この場合、Vueインスタンスが作成されたメインアプリケーションファイル内で、Vueプロトタイプにライブラリを定義することができます。これにより、どのコンポーネントからでもアクセスできるようになります。

import moment from 'moment'; Object.definePrototype(Vue.prototype, '$moment', { value: moment });

、詳細な説明とより良い実践のためのthe articleに従ってください。

Answer 2

正しい答えは次のとおりです。

まずあなたがプロパティを定義することができますので、あなたは、ライブラリをインポートする必要があります。

import moment from 'moment'; 
Object.defineProperty(Vue.prototype, '$moment', { value: moment }); 

あなたが代わりにプロトタイプを定義プロパティを定義する使用する必要があることに注意してください。あなたはこのようなあなたのVueの何かに呼び出すことができます

この方法：this.$moment();