vueでjsファイルを参照する方法を詳しく解説

今回はvueでjsファイルを引用する方法について詳しく説明します。vueでjsファイルを引用する際の注意点は何ですか?実際の事例を見てみましょう。

1. vue-cli webpack は jquery をグローバルに導入します

(1) 最初の npm install jquery --save (--save は、モジュールをプロジェクト ディレクトリにインストールし、パッケージの依存関係ノードに書き込むことを意味します)ファイルの依存関係を入力します。)

(2)

  var webpack = require("webpack")

を追加します(3)

module.exportsの最後に

plugins: [
 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
 jQuery: "jquery",
 $: "jquery"
 })
]

を追加します (4) main.jsに導入すればOKです(テストはスキップしても大丈夫です)このステップ)

import $ from 'jquery'

(5) その後、npm run dev はページ内で $ を直接使用できます

2. 外部 js を参照する vue コンポーネントのメソッド

プロジェクトの構造は次のとおりです:

コンテンツコンポーネントコード:

<template>
 <p>
   <input ref=&#39;test&#39; id="test">
   <button @click=&#39;diyfun&#39;>Click</button>
 </p>
</template>
<script>
import {myfun} from '../js/test.js' //注意路径
export default {
 data () {
  return {
   testvalue: ''
  }
 },
 methods:{
   diyfun:function(){
     myfun();
   }
 }
}
</script>

test.jsコード:

function myfun() {
console.log('Success')
}
export { //很关键
 myfun
}

はes6構文を使用します。

3. 単一の vue ページは内部 js メソッドを参照します

(1) 最初の npm install jquery --save (--save は、モジュールをプロジェクト ディレクトリにインストールし、依存関係ノードに書き込むことを意味します)パッケージファイルの依存関係をインポートします)

(2) 参照する必要があるvueページに$をインポートして使用します

console.log($を変更すると、この図に黄色の警告が表示されます) ) これに:

export default{
  mounted: function(){
    console.log($)
  }
}

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

webpack+react開発環境の構築方法

Node.jsバッファの使用方法の詳細な説明

以上がvueでjsファイルを参照する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。