Detailed explanation of the method of referencing js files in vue

This time I will bring you a detailed explanation of the vuequotejs file method. What are the precautions for vue to reference js files. The following is a practical case, let's take a look.

1. vue-cli webpack globally introduces jquery

(1) First npm install jquery --save (--save means Install the module into the project directory and write dependencies in the dependencies node of the package file.)

(2) Add

  var webpack = require("webpack")

(3) to webpack.base.conf.js (3) module.exports is added at the end

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

(4) and it is ok if it is introduced in main.js (this step is not necessary for testing)

import $ from 'jquery'

(5) Then npm run dev can use $ directly in the page.

2. The method of vue component referencing external js

The project structure is as follows:

content component code:

<template>
 <p>
   <input>
   <button>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 code:

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

uses es6 syntax.

3. Single vue page refers to the internal js method

(1) First npm install jquery --save (--save means Install the module into the project directory and write dependencies in the dependencies node of the package file.)

(2) Import $ in the vue page that needs to be referenced, and then use it

There is a yellow warning in this picture. If you change console.log($) to this:

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

I believe you have mastered the method after reading the case in this article. Please come for more exciting information. Pay attention to other related articles on php Chinese website!

Recommended reading:

How to build a webpack react development environment

Detailed explanation of Node.js Buffer usage

The above is the detailed content of Detailed explanation of the method of referencing js files in vue. For more information, please follow other related articles on the PHP Chinese website!