[javascript] Parcel에서 Vue.js를 사용하는 방법은?

22 Nov 2023

javascript

1. 프로젝트 초기화 먼저, 프로젝트를 위한 디렉토리를 생성한 후, 해당 디렉토리로 이동하여 명령어를 실행합니다. 다음과 같이 package.json 파일을 생성합니다.

npm init -y

2. Vue.js 설치 Vue.js를 설치하기 위해 아래 명령어를 실행합니다.

npm install vue

3. HTML 파일 작성 프로젝트 디렉토리에 index.html 파일을 생성하고 아래 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Parcel + Vue.js</title>
</head>
<body>
   <div id="app"></div>
   <script src="./index.js"></script>
</body>
</html>

4. 엔트리 파일 작성 프로젝트 디렉토리에 index.js 파일을 생성하고 아래 코드를 추가합니다. 이 파일은 Vue 인스턴스를 생성하고 앱을 마운트하는 역할을 합니다.

import Vue from 'vue';

new Vue({
   el: '#app',
   template: `
      <div>
         <h1>Hello, Vue.js with Parcel!</h1>
      </div>
   `
});

5. 개발 서버 실행 프로젝트 디렉토리에서 다음 명령어를 실행하여 개발 서버를 시작합니다.

npx parcel index.html

이제 localhost:1234로 접속하여 Vue.js와 Parcel이 통합된 앱을 확인할 수 있습니다.

이 방법을 통해 Parcel을 사용하여 Vue.js 기반의 웹 앱을 빠르게 개발할 수 있습니다. Parcel은 번들링, 번들 최적화 및 개발 서버를 제공하여 개발 과정을 간소화하고 향상된 개발 경험을 제공합니다.

자세한 내용은 Vue.js 및 Parcel의 공식 문서를 참조하시기 바랍니다.