web-dev-qa-db-ja.com

vueコンポーネント内で使用するためのJavaScriptファイルのインポート

私は、jsプラグインを使用する必要があるプロジェクトに取り組んでいます。 vueを使用し、プラグインベースのロジックを処理するコンポーネントがあるため、jsプラグインファイルをvueコンポーネント内にインポートする必要がありますプラグインを初期化する順序。

以前は、これはマークアップ内で次のように処理されていました。

<script src="//api.myplugincom/widget/mykey.js
"></script>

これは私が試したものですが、コンパイル時エラーが発生しています：

MyComponent.vue

import Vue from 'vue';
import * from  '//api.myplugincom/widget/mykey.js';

export default {
    data: {

私の質問は、このJavaScriptファイルをインポートして、vueコンポーネント内で使用できるようにする適切な方法は何ですか？...

javascriptimportecmascript-6vue.jsvuejs2
10
AnchovyLegend

外部JavaScriptファイルを含める

Vueコンポーネントのマウントされたフックに（外部）JavaScriptを含めてみてください。

<script>
export default {
  mounted() {
    const plugin = document.createElement("script");
    plugin.setAttribute(
      "src",
      "//api.myplugincom/widget/mykey.js"
    );
    plugin.async = true;
    document.head.appendChild(plugin);
  }
};
</script>

リファレンス： タグをVueコンポーネント に含める方法

ローカルJavaScriptファイルをインポートする

VueコンポーネントにローカルJavaScriptをインポートする場合、次の方法でインポートできます。

MyComponent.vue

<script>
import * as mykey from '../assets/js/mykey.js'

export default {
  data() {
    return {
      message: `Hello ${mykey.MY_CONST}!` // Hello Vue.js!
    }
  }
}
</script>

プロジェクト構造が次のようになっているとします：

src
- assets
    - js
      - mykey.js
- components
    MyComponent.vue

また、mykey.jsで変数または関数をエクスポートできます。

export let myVariable = {};
export const MY_CONST = 'Vue.js';
export function myFoo(a, b) {
    return a + b;
}

注：Vue.jsバージョン2.6.10

14
Yuci

このスクリプトをダウンロードしてみてください
import * from '{path}/mykey.js'。
またはインポートスクリプト
<script src="//api.myplugincom/widget/mykey.js"></script> in <head>、コンポーネントでグローバル変数を使用します。

1
JJJ

ブラウザの方法で（つまり、タグを使用して）持ってきたスクリプトの場合、一般的に、いくつかの変数をグローバルに使用可能にします。

これらの場合、何もインポートする必要はありません。それらはただ利用可能になります。

Webstorm（または関連するJetBrains IDE）のようなものを使用している場合は、/* global globalValueHere */「ねえ、これは私のファイルでは定義されていませんが、存在します。」必須ではありませんが、「未定義」の波線は消えます。

例えば：

/* global Vue */

（直接使用する代わりに）CDNからVueを下に引いているときに使用するものです。

それ以外は、通常どおりに使用します。

0
samanime