vuejs에서 js를 참조하는 방법

vuejs에서 js를 참조하는 방법: 1. vue-cli webpack을 통해 jquery를 전역으로 가져옵니다. 2. "'../js/test.js'에서 {myfun} 가져오기" 방법을 통해 외부 js를 참조합니다. 단일 vue 페이지 내부 js를 인용하세요.

이 기사의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

vuejs js를 어떻게 인용하나요?

js 파일을 참조하는 다양한 방법(권장)

1. vue-cli webpack에서는 jquery를 전 세계적으로 도입합니다.

(1) 첫 번째 npm install jquery --save (--save는 모듈 설치를 의미합니다. 프로젝트 디렉토리에 추가하고 패키지 파일의 종속성 노드에 종속성을 작성합니다.)

(2) webpack.base.conf.js에

var webpack = require("webpack")

를 추가합니다(3) module.exports 끝에

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

를 추가합니다(4. ) main.js에 도입해도 괜찮습니다(테스트를 위해 이 단계를 사용할 필요는 없습니다)

import $ from 'jquery'

(5) 그러면 npm run dev는 페이지에서 직접 $를 사용할 수 있습니다.

2. 외부 참조 js 메소드 프로젝트 구조는 아래와 같습니다:

콘텐츠 구성 요소 코드:

<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 코드:

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

es6 구문을 사용합니다.

3. 단일 vue 페이지는 내부 js 메서드를 나타냅니다(1) 먼저 npm install jquery --save(--save는 모듈을 프로젝트 디렉터리에 설치하고 종속성 노드에 쓰는 것을 의미합니다. 패키지 파일 Import dependency.)

(2) 참조해야 하는 vue 페이지에서 $를 가져온 다음 사용하세요

console.log($를 변경하면 이 그림에 노란색 경고가 표시됩니다. ) to this:

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

그런 일은 일어나지 않을 것입니다. vue

추천: "

최신 5개 vue.js 비디오 튜토리얼

"

위 내용은 vuejs에서 js를 참조하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!