JavaScript - Vue でネイティブ JS プラグインを使用する方法

Question

.vue ファイルでパブリック メソッドを使用する方法は? 現在、メソッド名を使用して直接呼び出さないようにしています。

＃＃＃ 例えば： ＃＃＃ リーリー

質問が 2 つあります:

1. メソッドはどこに記述すべきですか? main.js に記述するべきですか、それとも別のファイル common.js を作成して main.js にインポートすべきですか?

2. Login.vue ファイルでどのように呼び出しますか? 直接 getId() は機能せず、getId が定義されていないというエラーが報告されます

Answer 1

プラグインパッケージの構造に応じて読み込み方法は一般にいくつかありますが、基本的にはmain.js或者App.vueに読み込みコードを追加します。

• プラグイン パッケージが純粋な JS または CSS ファイルであり、グローバル プラグイン変数を公開する場合、import 'xxxxxx'就可以了，其中xxxxxx が JS または CSS へのパスである限り。このようなプラグインには、jQuery や Bootstrap が含まれます。

• ただし、次の設定が import '....'加载之后不能直接使用，需要在打包脚本配置webpack.base.conf.js を通じて jQuery JS ファイルに追加されることに注意してください (設定の一部は省略されています):

リーリー

この設定のヘッダーに var webpack = require('webpack')，防止报错webpackunknown を追加していることにも注意してください。

• プラグインがモジュール化されており、オブジェクトまたはメソッドが公開されているが、モジュール間で使用できない場合 (npm安装到项目的bootbox插件），我是通过在框架App.vue里添加import bootbox from 'bootbox/bootbox.js'，然后在App.vue的data中添加一行bootbox: bootbox，在其他Vue页面中通过this.$root.bootbox.

を介してブートボックス プラグインを呼び出すなど)

• import的方法加载，需要使用var xxx = require('xxx')的方式加载。这种插件一般是作为Vue框架的插件来用的，比如Vue-filter。这种一般是在main.js里添加var vueFilter = require('vue-filter')加载，然后用Vue.use(vueFilter)使vue-filter経由でVueアプリケーションに登録できないプラグインもあります。

• あなたの説明によると、このメソッドは別のファイルを書き込み、main.js里实现起来是没有区别的。建议在App.vue里写这个方法，然后加到methods里去，在需要调用的地方使用this.$root.getId()callを直接書き込みます（上記の3番目のケースを参照）

Answer 2

main.js中importに直接アクセスしてください。

Answer 3

ES6 モジュールを学習し、一般的なメソッドをモジュールとして記述し、呼び出す必要があるモジュールで呼び出すことをお勧めします。また、main.js で記述することもできます。 リーリー

その後、

をグローバルに呼び出します。 window.util.xxx

Answer 4

これが私がそれを処理する方法です。新しいjs common.jsを作成し、グローバル変数を定義します

リーリー

次に、common.js を main.js に導入します

リーリー

その後、login.vue ファイルでこのグローバル変数を次のように使用できます

this.url.commonUrl`

Answer 5

ツールクラスとして別のファイルに記述されており、.vueファイルに限定されず、どこにでもインポートできます。
(util.js)

リーリー

(login.vue)

リーリー

Answer 6

1. 新しい common.js を作成し、次のように記述します。 リーリー
})(ウィンドウ);

2.main.jsを導入する

import「./common.js」

3. 任意の .vue ファイルで呼び出すことができます

<script>

デフォルトをエクスポート{
リーリー
}

</script>

Answer 7

@rehapun の回答と同様、この方法は非常に優れており、私は通常この方法を使用しています。また、繰り返し参照することでパッケージのボリュームが増加することを心配する必要はありません。 Webpack でパッケージ化するときに CommonsChunkPlugin を使用してパブリック ベンダーを抽出できます。

Answer 8

まず定義したjsファイルを引用しますimport '文件的位置',

リーリー