How to reference js in vuejs

How vuejs refers to js: 1. Import jquery globally through vue-cli webpack; 2. Reference external js through the "import {myfun} from '../js/test.js'" method; 3. Just reference the internal js in a single vue page.

The operating environment of this article: Windows 7 system, vue version 2.9.6, DELL G3 computer.

vuejs How to reference js?

Vue multiple ways to reference js files (recommended)

##1. vue-cli webpack globally introduces jquery

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

(2) Add

var webpack = require("webpack")

to webpack.base.conf.js (3) Add

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

at the end of module.exports (4) Introduce it into main.js and it will be ok (You can do this without testing this step)

import $ from 'jquery'

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

2. The vue component refers to the external js method

The project structure is as shown in the figure:

content component code:

<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 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($)
  }
}

, it will not be there. The reason may be that it must comply with the js in vue. How to write

Recommended: "

The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to reference js in vuejs. For more information, please follow other related articles on the PHP Chinese website!