Vue.js 개발 환경

지난 시간에 이어 Vue.js의 개발 환경을 구축하는 방법의 하나인 npm과 Vue CLI 설치를 살펴봅니다.

1. Node.js 및 npm 설치

먼저 Node.js와 npm이 컴퓨터에 설치되어 있는지 확인하세요. Node.js를 설치하면 npm도 함께 설치됩니다. Node.js를 아직 설치하지 않았다면 https://nodejs.org/에서 Node.js를 다운로드하고 설치하세요.

 

2. Vue CLI 설치

Vue.js를 사용하는 프로젝트를 생성하고 관리하는 데 도움이 되는 Vue CLI 도구를 설치하려면 다음 명령을 사용합니다.

npm install -g @vue/cli

 

3. Vue.js 설치

Vue CLI를 사용하지 않고 Vue.js를 직접 설치하려면 프로젝트 폴더로 이동한 후 다음 명령을 실행합니다.

npm install vue

이렇게 하면 Vue.js 라이브러리가 프로젝트 폴더의 node_modules 디렉토리에 설치됩니다.

4. Vue.js를 사용하여 프로젝트 개발

Vue.js를 설치한 후에는 프로젝트에서 Vue.js를 사용할 수 있습니다. Vue CLI를 사용하는 경우 vue create 명령을 사용하여 Vue 프로젝트를 생성하고, 직접 설치한 경우 HTML 파일에서 Vue 인스턴스를 생성하고 Vue 컴포넌트를 개발할 수 있습니다.

Vue CLI를 사용하여 프로젝트를 생성하려면 다음 명령을 실행합니다:

vue create my-vue-project

그런 다음 cd my-vue-project를 사용하여 프로젝트 폴더로 이동하고, Vue.js를 사용하여 개발 작업을 시작할 수 있습니다.

Vue.js를 npm을 통해 설치하면 프로젝트의 종속성으로 쉽게 관리할 수 있으며, 개발 및 배포 프로세스를 효과적으로 관리할 수 있습니다.

 

 

5. Vue.js 설치

Vue CLI를 통해 프로젝트를 생성하면 이미 Vue.js가 포함되어 있습니다. 따라서 별도로 Vue.js를 설치할 필요가 없습니다.

6. 프로젝트 실행

프로젝트를 생성한 후 프로젝트 폴더로 이동하고 다음 명령을 사용하여 개발 서버를 시작할 수 있습니다.

cd my-vue-project npm run serve

이렇게 하면 개발 서버가 시작되고 프로젝트를 브라우저에서 확인할 수 있습니다.

npm run dev

위의 명령은 Node.js 프로젝트는 핫 리로딩이 적용된 상태이므로 HTML 이나 js 파일을 수정하고 저장하면 실행중인 웹 사이트에 적용되는 것은 물론이고 실시간으로 빌드됩니다.

Vue CLI를 사용하면 프로젝트 구성 및 관리를 단순화하고, Vue.js 프로젝트를 빠르게 시작할 수 있습니다. Vue.js와 Vue CLI를 함께 사용하면 효율적으로 Vue.js 애플리케이션을 개발할 수 있습니다.