첫 번째 Vue.js 프로젝트 설정

Vue.js는 사용자 인터페이스와 단일 페이지 애플리케이션을 구축하기 위한 진보적인 JavaScript 프레임워크입니다. 매우 유연하고 다른 라이브러리나 기존 프로젝트와 쉽게 통합할 수 있습니다. 이 가이드에서는 Vue CLI를 사용하여 첫 번째 Vue.js 프로젝트를 설정하는 단계를 안내합니다. Vue CLI는 Vue 애플리케이션을 스캐폴딩하고 관리하기 위한 강력한 도구입니다.

필수 조건

Vue.js 프로젝트를 설정하기 전에 시스템에 다음이 설치되어 있는지 확인하세요.

Node.js와 npm: Vue.js는 Node.js와 npm(Node Package Manager)이 설치되어 있어야 합니다. 공식 Node.js 웹사이트에서 다운로드할 수 있습니다.

1단계: Vue CLI 설치

Vue CLI(명령줄 인터페이스)는 Vue.js 프로젝트를 쉽게 만들고 관리하는 데 도움이 되는 도구입니다. Vue CLI를 시스템에 전역적으로 설치하려면 터미널이나 명령 프롬프트를 열고 다음 명령을 실행하세요.

npm install -g @vue/cli

이 명령은 Vue CLI를 전역적으로 설치하여 터미널의 어디에서나 vue 명령에 액세스할 수 있게 해줍니다.

2단계: 새 Vue 프로젝트 만들기

Vue CLI가 설치되면 다음 명령을 실행하여 새 Vue.js 프로젝트를 만들 수 있습니다.

vue create my-vue-app

프로젝트에 대한 프리셋을 선택하라는 메시지가 표시됩니다. Babel과 ESLint를 포함하는 기본 프리셋을 선택하거나 Vue Router, Vuex, TypeScript 등의 기능을 수동으로 선택할 수 있습니다. 초보자의 경우 Enter를 눌러 기본 프리셋을 선택하는 것이 좋습니다.

그러면 Vue CLI가 my-vue-app라는 이름의 새 폴더를 만들고 모든 필수 파일과 구성으로 프로젝트 구조를 설정합니다.

3단계: 프로젝트 폴더로 이동

프로젝트가 생성되면 다음 명령을 사용하여 프로젝트 폴더로 이동합니다.

cd my-vue-app

이렇게 하면 터미널의 작업 디렉토리가 새로 생성된 Vue.js 프로젝트 폴더로 변경됩니다.

4단계: 개발 서버 실행

새 Vue.js 애플리케이션이 실제로 작동하는 모습을 보려면 다음을 실행하여 로컬 개발 서버를 시작하세요.

npm run serve

이 명령은 http://localhost:8080(또는 다른 사용 가능한 포트)에서 개발 서버를 시작합니다. 웹 브라우저를 열고 이 URL로 이동하여 새 Vue.js 애플리케이션을 봅니다.

프로젝트 구조 이해

새로운 Vue.js 프로젝트를 만든 후에는 잘 정리된 프로젝트 구조가 보일 것입니다. 주요 파일과 폴더는 다음과 같습니다.

src: 이 폴더에는 Vue.js 애플리케이션의 소스 코드가 들어 있습니다. 모든 구성 요소, 뷰 및 스타일이 여기에 있습니다.
public: 이 폴더에는 이미지, 글꼴, 애플리케이션의 진입점 역할을 하는 index.html 파일과 같은 정적 자산이 들어 있습니다.
src/main.js: Vue.js 애플리케이션의 주요 진입점입니다. 이 파일은 Vue 인스턴스를 초기화하고 DOM에 마운트합니다.
src/App.vue: 애플리케이션의 루트 구성 요소입니다. 이 파일을 수정하여 앱의 기본 레이아웃을 변경할 수 있습니다.
src/components: 이 폴더에는 HelloWorld.vue와 같은 Vue 구성 요소 예가 들어 있습니다. 여기에 새 구성 요소를 추가하고 애플리케이션으로 가져올 수 있습니다.

5단계: 애플리케이션 사용자 지정

App.vue 파일을 편집하고 새 구성 요소를 만들어 Vue.js 애플리케이션을 사용자 정의할 수 있습니다. 다음은 간단한 Vue 구성 요소의 예입니다.

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Vue의 핫 리로딩 기능 덕분에 변경 사항을 저장하고 브라우저에서 즉시 결과를 볼 수 있습니다.

결론

축하합니다! 첫 번째 Vue.js 프로젝트를 성공적으로 설정하고 Vue 애플리케이션을 만들고 실행하는 방법의 기본 사항을 배웠습니다. Vue CLI를 사용하면 Vue.js 프로젝트를 스캐폴딩, 개발 및 관리하는 데 도움이 되는 강력한 도구가 있습니다. 여기에서 라우팅을 위한 Vue Router, 상태 관리를 위한 Vuex, 보다 강력하고 유연한 개발을 위한 Composition API와 같은 고급 기능을 탐색할 수 있습니다.

vuejs cli 설치 프로젝트 nodejs npm 컴포넌트 템플릿 스크립트 스타일 webpack typescript 라우터 vuex