JavaScript - Vue でネイティブ JS プラグインを使用する方法
迷茫
迷茫 2017-06-26 10:57:23
0
8
1823

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

### 例えば: ### リーリー

質問が 2 つあります:

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

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

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

全員に返信(8)
学习ing

プラグインパッケージの構造に応じて読み込み方法は一般にいくつかありますが、基本的には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.vuedata中添加一行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番目のケースを参照)

いいねを押す +0
某草草

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

いいねを押す +0
过去多啦不再A梦

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

その後、

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

いいねを押す +0
淡淡烟草味

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

リーリー

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

リーリー

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

this.url.commonUrl`

いいねを押す +0
世界只因有你

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

リーリー

(login.vue)

リーリー
いいねを押す +0
世界只因有你

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

2.main.jsを導入する

import「./common.js」


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

<script>

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

</script>

いいねを押す +0
巴扎黑

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

いいねを押す +0
为情所困

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

リーリー
いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート