Vue.js 프로젝트 설정 - vue cli 시작하기

Vue.js 프로젝트를 설정하는 과정은 Vue CLI를 사용하면 매우 간단하고 효율적입니다.

아래에 Vue CLI를 사용하여 프로젝트를 설정하는 단계별 가이드를 제공하겠습니다.

 

1. 개발 환경 설정

 

Vue.js 프로젝트를 시작하기 전에 Node.js와 Vue CLI가 설치되어 있어야 합니다.

 

• Node.js 설치:

• Node.js 공식 웹사이트에서 최신 LTS 버전을 다운로드하고 설치합니다.

• 설치가 완료되면, 터미널에서 Node.js와 npm(Node Package Manager)의 버전을 확인합니다.

 

node -v
npm -v

 

• Vue CLI 설치:

• Vue CLI는 Vue.js 애플리케이션을 생성하고 관리하는 데 도움을 주는 명령줄 도구입니다.

• npm을 사용하여 Vue CLI를 전역 설치합니다.

 

npm install -g @vue/cli

 

• Vue CLI 설치가 완료되면, 터미널에서 버전을 확인합니다.

vue --version

2. 새로운 Vue 프로젝트 생성

 

Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성합니다.

 

• 프로젝트 생성 명령어:

vue create my-project

 

• 프로젝트 생성 과정:

• 프로젝트 이름을 지정하고, Vue CLI에서 제공하는 기본 템플릿을 선택하거나, 커스텀 설정을 선택할 수 있습니다.

• 기본 템플릿을 선택할 경우, “Default (Vue 2)” 또는 “Default (Vue 3)” 중 하나를 선택합니다.

• 커스텀 설정을 선택할 경우, 필요한 기능들을 선택할 수 있습니다. (예: Babel, TypeScript, Vue Router, Vuex, CSS Pre-processors, Linter/Formatter, Unit Testing, E2E Testing)

 

3. 프로젝트 디렉토리 구조

 

프로젝트 생성이 완료되면, 해당 디렉토리로 이동하여 프로젝트 구조를 확인합니다.

 

my-project/
├── node_modules/       // 프로젝트의 의존성 모듈들이 설치되는 디렉토리
├── public/             // 정적 파일들이 위치하는 디렉토리
│   └── index.html      // 애플리케이션의 기본 HTML 파일
├── src/                // 소스 코드가 위치하는 디렉토리
│   ├── assets/         // 이미지, 스타일 등의 정적 파일
│   ├── components/     // Vue 컴포넌트들이 위치하는 디렉토리
│   ├── App.vue         // 루트 컴포넌트
│   ├── main.js         // 애플리케이션의 진입 파일
├── .gitignore          // Git에서 무시할 파일들을 지정하는 파일
├── babel.config.js     // Babel 설정 파일
├── package.json        // 프로젝트 메타데이터 및 의존성 정보
├── README.md           // 프로젝트 설명서

4. 프로젝트 실행

 

프로젝트가 생성되면, 로컬 개발 서버를 실행하여 애플리케이션을 확인할 수 있습니다.

 

• 개발 서버 실행:

cd my-project
npm run serve

 

• npm run serve 명령어를 실행하면, 로컬 개발 서버가 시작되고, 애플리케이션을 브라우저에서 확인할 수 있습니다. 일반적으로 http://localhost:8080에서 실행됩니다.

 

5. 주요 파일 및 설정

 

프로젝트의 주요 파일과 설정에 대해 이해하는 것이 중요합니다.

 

• package.json:

• 프로젝트의 메타데이터 및 의존성 정보를 포함합니다.

• 스크립트 섹션에서 다양한 명령어를 정의할 수 있습니다.

• 예:

{
  "name": "my-project",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-service": "~4.5.0"
  }
}

• main.js:

• Vue 애플리케이션의 진입 파일로, Vue 인스턴스를 생성하고, 루트 컴포넌트를 마운트합니다.

• 예:

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

 

• App.vue:

• 루트 컴포넌트로, 애플리케이션의 주요 구조를 정의합니다.

• 예:

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

요약

 

1. 개발 환경 설정: Node.js와 Vue CLI 설치.

2. 새로운 Vue 프로젝트 생성: Vue CLI를 사용하여 프로젝트 생성.

3. 프로젝트 디렉토리 구조: 프로젝트의 기본 구조 이해.

4. 프로젝트 실행: 로컬 개발 서버를 통해 애플리케이션 확인.

5. 주요 파일 및 설정: package.json, main.js, App.vue 등의 주요 파일 이해.