Home> Web Front-end> Vue.js> body text

How to reference js in vuejs

藏色散人
Release: 2023-01-13 00:45:45
Original
6123 people have browsed it

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.

How to reference js in vuejs

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")
Copy after login

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

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

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'
Copy after login

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

 
Copy after login

test.js code :

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

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

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn