집 >웹 프론트엔드 >JS 튜토리얼 >vue에 js 파일을 도입하는 방법은 무엇입니까

vue에 js 파일을 도입하는 방법은 무엇입니까

清浅원래의: 2019-05-05 13:21:4839829검색

JS 파일을 VUE 프로젝트에 도입하는 여러 가지 방법

Vue 프로젝트를 개발할 때 때로는 내보내기 없이 ES6 형식이 아닌 일부 js 라이브러리를 사용해야 하는 경우가 있습니다.

1. index.html 페이지에

를 소개하는 스크립트 태그를 사용하세요. 물론 CDN 주소를 사용해도 됩니다. 이런 방식으로 가져온 콘텐츠는 전역적이며 어디에서나 사용할 수 있습니다.

<!DOCTYPE html>
 <html>
<head>
      <title>Map</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <link rel="shortcut icon" type="image/x-icon" href="./static/img/favicon.ico"/>
      <script src=&#39;./static/libs/three/three.min.js&#39;></script>
      <script src="./static/libs/three/GLTFLoader.js"></script>
   </head>
   <body>
     <p id="app"></p>
     <!-- built files will be auto injected -->
   </body></html>

2. main.js에서 window.moduleName을 사용하거나

를 사용하거나 Vue.prototype에 넣어서 컴포넌트에서 사용할 수 있도록 합니다.

var THREE = window.THREEvar GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE

3. js 라이브러리에서 사용해야 하는 메서드에 대해 내보내기 기본값 { /**내보내기 방법**/}에 수동으로 내보내기

를 추가한 다음

에서 가져오기 {*}를 사용하세요. JS 라이브러리:

function realconsole(){  
    alert("hello world!");  }  
 export {  
     realconsole }

JS 라이브러리를 사용해야 하는 구성 요소:

import realconsole from &#39;./xxx&#39;

4. 가져오기 메서드를 사용하여 다음과 같이 필수 js 라이브러리의 메서드를 전역

에 마운트합니다.

 import &#39;@static/libs/GLTFLoader&#39; 
 // 可以从全局获取导入的方法 
 let GLTFLoader = THREE.GLTFLoader

관련 권장 사항:

2020년 프런트엔드 Vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요. 프로그래밍 입문! !

위 내용은 vue에 js 파일을 도입하는 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트는 무엇을 할 수 있나요?다음 기사：자바스크립트는 무엇을 할 수 있나요?