Explication détaillée de la méthode de référencement des fichiers js dans vue

Cette fois, je vais vous apporter une explication détaillée de la façon dont vue référence les fichiers js Quelles sont les précautions pour que vue référence les fichiers js Voici des cas pratiques, prenons un. regarder.

1. vue-cli webpack introduit globalement jquery

(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")

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

(4) à la fin du

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

module

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

import $ from 'jquery'

2. La méthode de référencement du composant vue en js externe

La structure du projet est la suivante :

contenu code du composant :

code test.js :

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

utilisait la syntaxe es6.

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

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 écrivez les dépendances dans le nœud de dépendances du fichier du package. )

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

Il y a un avertissement jaune sur cette image. Si vous modifiez console.log($) pour ressembler à ceci :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article, plus Veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

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

Lecture recommandée :

Comment créer un environnement de développement webpack+react

Explication détaillée de l'utilisation du tampon Node.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!