Vue CLI 외부 스크립트(js) 파일 생성 및 사용(가져오기) - Vue CLI Script Export, Import

Vue에서 스크립트 파일을 생성하고 컴포넌트에서 가져와 사용하는 방법을 알아보도록 하겠습니다.

 

 

Script Export & Import

 

Vue에서 스크립트 파일(js)을 생성하고 다른 컴포넌트에서 가져가서 사용할 수 있도록 하기 위해서는 export로 내보내야 합니다.

 

스크립트 파일에서 원시 값, 함수, 객체를 생성하여 export로 내보낼 수 있습니다.

간단하게 원시 값으로 설명드리겠습니다. 함수, 객체 모두 동일합니다.

 

하나의 원시 값을 export로 내보냅니다.

// test.js 파일
// PI 값
export const PI = 3.14;

 

Vue 컴포넌트의 <script>에서는 스크립트 파일을 import로 가져올 때 export로 내보내어지는 원시 값 명과 동일해야 합니다. 원시 값, 함수, 객체 모두 동일하게 처리해야 합니다.

<script>
import {PI} from './test.js';
</script>

 

만약, 원시 값 명과 동일하지 않으면 "not found" 경고(warning)가 발생합니다.

<script>
import {PI1} from './test.js';
</script>

WARNING  Compiled with 1 warning                                                                          오후 12:40:01

warning  in ./src/views/Home.vue?vue&type=script&lang=js

"export 'PI1' was not found in './test.js'

 

여러 개의 원시 값들을 export로 내보냅니다.

// test.js 파일
// PI 값
export const PI = 3.14;
export const detailedPI = 3.14159265359;

또는 여러 개의 원시 값들을 객체({})로 묶어서 export로 내보낼 수 있습니다.

// test.js 파일
// PI 값
const PI = 3.14;
const detailedPI = 3.14159265359;

export {PI, detailedPI};

 

Vue 컴포넌트의 <script>에서 import로 가져올 때 사용할 원시 값 명들을 적용하면 됩니다.

<script>
import {PI, detailedPI} from './test.js';
// or
// import {detailedPI} from './test.js';
</script>

만약, 사용하지 않는 원시 값 명을 적용하면 선언된 변수가 Vue 컴포넌트에서 사용하지 않으면 "is defined but never used (no-unused-vars) - 정의되었지만 사용되지 않았습니다."라는 에러가 발생합니다.

error  'PI' is defined but never used  no-unused-vars

 

 

 

export default

 

export에 default를 추가하여 사용하면 특정 하나만 내보내게 됩니다.

// test.js 파일
// PI 값
const PI = 3.14;

export default PI;

 

Vue 컴포넌트의 <script>에서는 스크립트 파일을 import로 가져올 때 export로 내보내어지는 원시 값 명이 아닌 <script>에서 사용할 변수 명이 됩니다. 변수 명은 원하는 변수 명으로 하시면 됩니다.

<script>
import test from './test.js';
</script>

test는 test.js의 PI가 됩니다.

 

만약, 여러 개가 선언되어 있는데 export가 되지 않으면  에러(error)가 발생합니다.

// test.js 파일
// PI 값
const PI = 3.14;
const detailedPI = 3.14159265359;

export default PI;

선언된 변수가 export가 되지 않으면 "is assigned a value but never used (no-unused-vars) - 할당되었지만 사용되지 않았습니다."라는 에러가 발생합니다.

error  'detailedPI' is assigned a value but never used  no-unused-vars

 

그래서 여러 개의 원시 값들을 객체({})로 묶어서 export default로 내보내면 됩니다.

// test.js 파일
// PI 값
const PI = 3.14;
const detailedPI = 3.14159265359;

export default {PI, detailedPI};

또는 객체로 만들어서 export default로 내보낼 수 있습니다.

// test.js 파일
const test = {
	// PI 값
	PI: 3.14,
	detailedPI: 3.14159265359
};
export default test;

 

Vue 컴포넌트의 <script>에서는 test가 객체이므로 .(도트)를 이용하여 사용하시면 됩니다.

<script>
import test from './test.js';

console.log(test.PI);
console.log(test.detailedPI);
</script>