[Vue] 개발환경 설정 / 프로젝트 생성

이 챕터에서는 Vue 3 개발을 위한 환경을 설정하는 방법을 단계별로 설명합니다.

Vue를 설치하고, 필요한 도구들을 설정하여 Vue 프로젝트를 시작할 수 있는 준비를 마칩니다. 🚀

---

 

1. Node.js와 npm 설치 💻

Vue.js는 Node.js와 npm을 기반으로 실행됩니다. 따라서 Vue 프로젝트를 시작하려면 먼저 Node.js와 npm을 설치해야 합니다.

Node.js 설치 방법:

1. Node.js 공식 웹사이트에 접속하여 LTS 버전을 다운로드합니다.
2. 설치가 완료되면, 명령어 프롬프트(또는 PowerShell)를 열고 다음 명령어로 설치가 제대로 되었는지 확인합니다:

 node -v
 npm -v

설치된 Node.js와 npm 버전이 출력되면 정상적으로 설치된 것입니다. ✅

설치 경로 확인:

• Node.js와 npm은 기본적으로 C:\Program Files\nodejs\ 경로에 설치됩니다.

---

2. Vue CLI 글로벌 설치 🛠️

Vue CLI는 Vue 프로젝트를 쉽게 생성하고 관리할 수 있게 도와주는 도구입니다. Vue CLI를 설치하면 명령어를 통해 프로젝트를 생성하고, 빌드를 쉽게 할 수 있습니다.

Vue CLI 글로벌 설치 방법:

1. 터미널(명령어 프롬프트)을 열고, 아래 명령어를 입력하여 Vue CLI를 글로벌로 설치합니다:

npm install -g @vue/cli

2. 설치가 완료되면, 다음 명령어로 Vue CLI가 정상적으로 설치되었는지 확인합니다:

vue --version

Vue CLI의 버전이 출력되면 정상적으로 설치된 것입니다. 🔧

---

3. VSCode Extensions 설치 🔌

Vue 개발을 위해 **Visual Studio Code (VSCode)**는 매우 유용한 IDE입니다. VSCode에서 Vue.js를 효율적으로 개발하기 위해 필요한 확장 기능들을 설치합니다.

설치할 확장 기능:

1. Volar: Vue 3 지원을 위한 주요 확장입니다. Vue 3의 문법 강조, 자동 완성, 코드 스니펫 등을 제공합니다.
2. Vue 3 Snippets: Vue 3에서 자주 사용하는 코드 스니펫을 빠르게 입력할 수 있게 해주는 확장입니다.

설치 방법:

1. VSCode를 열고, 왼쪽 사이드바에서 Extensions 아이콘을 클릭합니다.
2. 검색창에 Volar와 Vue 3 Snippets를 검색하여 설치합니다.

---

4. Vue 프로젝트 생성 🎬

이제 Vue CLI를 사용하여 실제 Vue 3 프로젝트를 생성해봅니다. 프로젝트 생성은 Vue CLI의 vue create 명령어로 가능합니다.

Vue 프로젝트 생성 방법:

1. 터미널을 열고, 프로젝트를 만들고 싶은 폴더로 이동합니다.
2. 아래 명령어를 입력하여 새 프로젝트를 생성합니다:

vue create movie-info

3. 프로젝트 생성 시, 기본 설정을 선택하거나, 원하는 설정을 선택할 수 있습니다. 이때 Vue 3을 선택하도록 합니다.
4. 생성이 완료되면, 해당 프로젝트 폴더로 이동합니다:

cd movie-info

5. 다음 명령어로 개발 서버를 실행하여 프로젝트가 정상적으로 동작하는지 확인합니다:

npm run serve

서버가 실행되면, 브라우저에서 http://localhost:8080으로 접속하여 Vue 애플리케이션을 확인할 수 있습니다. 🌍

반응형

---

이로써 Vue 3 개발 환경 설정이 완료되었습니다.

이제 Vue의 다양한 기능을 활용하여 애플리케이션을 개발할 준비가 되었습니다! 😄