vuejsでjsを参照する方法

vuejs が js を参照する方法: 1. vue-cli webpack を通じて jquery をグローバルにインポートします; 2. 「import {myfun} from '../js/test.js'」メソッドを通じて外部 js を参照します; 3単一の vue ページで内部 js を参照するだけです。

この記事の動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

vuejs js を参照するにはどうすればよいですか?

#Vue で js ファイルを参照する複数の方法 (推奨)

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

( 2) webpack.base.conf.js に

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. vue コンポーネントは参照します。 #プロジェクトの構造は次の図に示すとおりです:

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

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

。その理由は次のとおりです。書き方

推奨: "

最新の vue.js ビデオ チュートリアル 5 選

"

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