Comment référencer js dans vuejs

Comment référencer js dans vuejs : 1. Importez jquery globalement via vue-cli webpack ; 2. Référencez des js externes via la méthode "import {myfun} from '../js/test.js'" ; page à vue unique Citez simplement le js interne.

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

vuejs Comment citer js ?

Vue plusieurs façons de référencer les fichiers js (recommandé)

1. vue-cli webpack introduit jquery globalement

(1) Premier npm install jquery --save (--save signifie installer le module dans le répertoire du projet et écrivez les dépendances dans le nœud de dépendances du fichier du package.)

(2) Ajoutez

var webpack = require("webpack")

à webpack.base.conf.js(3) Ajoutez

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

à la fin de module.exports. ) C'est OK de l'introduire dans main.js (vous n'avez pas besoin d'utiliser cette étape pour les tests)

import $ from 'jquery'

(5) Ensuite, npm run dev peut utiliser $ directement dans la page.

2. fait référence à la méthode externe La méthode js La structure du projet est la suivante :

Code du composant de contenu :

<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>

code test.js :

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

Utilisation de la syntaxe es6.

3. La page à vue unique fait référence à la méthode js interne(1) Premier npm install jquery --save (--save signifie installer le module dans le répertoire du projet et l'écrire dans le nœud de dépendances de le fichier du package Importer les dépendances. )

(2) Importez $ dans la page vue qui doit être référencée, puis utilisez-le

Il y a un avertissement jaune dans cette image, si vous modifiez console.log($ ) à ceci :

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

Cela n'arrivera pas. La raison peut être qu'il doit se conformer à la méthode d'écriture de js dans vue

Recommandation : "

La dernière sélection de 5 tutoriels vidéo vue.js

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!