[Vue.js] Vue 설치방법과 간단한 예제

Vue.js 는 심플하면서도 확정성이 높은 프레임워크로 개인 프로젝트나 대규모 엔터프라이즈 애플리케이션에서도 효율적으로 사용할 수 있습니다. Vue.js를 사용하면 더 직관적이고, 가독성 좋은 코드를 작성하면서도 빠르고 매끄러운 웹 애플리케이션을 구현할 수 있습니다. PC에 Vue.js를 설치하는 방법과 간단한 예제(Todo List)를 통해 사용방법에 대해 알아보겠습니다.

 

1. nodejs 설치

• 아래 URL로 접속합니다.

https://nodejs.org/en/download/prebuilt-installer

Download 버튼 클릭

Next 버튼클릭

약관 동의 후 Next 버튼 클릭

설치경로 지정

Default 로 설정

Next 버튼 클릭

Install 버튼 클릭

설치완료

cmd 창으로 설치확인

 

2. Vue CLI 설치

• cmd 창을 열고 npm을 사용해 전역으로 설치합니다.

npm install -g @vue/cli

• 설치 후, vue --version 명령어를 통해 정상설치 되었는지 확인 가능합니다.

 

3. Vue 프로젝트 생성

• 원하는 경로로 이동후, cmd 창에 명령어를 입력합니다.

vue create todolist-app

• 예제에서는 Vue 3로 진행하였습니다.

npm run serve

 

• vscode 를 이용해 해당 프로젝트를 open 합니다.
• npm run serve 명령어를 통해 실행하면 기본페이지를 만날 수 있습니다.

 

4. 예제소스 작성

4.1. 프로젝트 구조

todolist-app/
├── node_modules/               # 프로젝트의 모든 패키지 의존성 파일
├── public/                     # 정적 파일들이 위치
├── src/
│   ├── assets/                 # 이미지 및 CSS와 같은 리소스
│   │   ├── main.css		# 전역 스타일 파일
│   │   ├── todo-input.css      # 입력창 스타일 파일
│   │   └── todo-list.css       # ToDo 리스트 스타일 파일
│   ├── components/             # Vue 컴포넌트 파일들을 저장하는 폴더
│   │   ├── TodoInput.vue       # 할 일 입력을 담당하는 컴포넌트
│   │   └── TodoList.vue        # 할 일 목록을 담당하는 컴포넌트
│   ├── App.vue                 # 메인 컴포넌트
│   ├── main.js                 # Vue 앱의 진입점 파일
├── package.json                # 프로젝트의 정보 및 의존성 패키지 목록

 

4.2. css

/* main.css */
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    text-align: center;
    margin-top: 60px;
}

/* todo-input.css */
.todo-input {
    margin-bottom: 20px;
}

input {
    padding: 10px;
    font-size: 16px;
}

button {
    margin-left: 10px;
    padding: 5px 10px;
}

/* todo-list.css */
.todo-list {
    list-style: none;
    padding: 0;
}

li {
    margin: 10px 0;
}

button {
    margin-left: 10px;
}

 

4.3. TodoInput.vue

<template>
  <div class="todo-input">
    <input
      v-model="newTodo"
      @keyup.enter="addTodo"
      placeholder="새 할 일을 입력하세요"
    />
    <button @click="addTodo">추가</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: "", // 새 할 일 입력 데이터
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== "") {
        this.$emit("add-todo", this.newTodo); // 부모 컴포넌트로 새 할 일 데이터 전달
        this.newTodo = ""; // 입력 필드를 초기화
      }
    },
  },
};
</script>

<style src="../assets/todo-input.css"></style>

 

4.4. TodoList.vue

<template>
  <ul class="todo-list">
    <li v-for="(todo, index) in todos" :key="index">
      <span
        :style="{ textDecoration: todo.completed ? 'line-through' : 'none' }"
      >
        {{ todo.text }}
      </span>
      <button @click="$emit('toggle-todo', index)">완료</button>
      <button @click="$emit('delete-todo', index)">삭제</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style src="../assets/todo-list.css"></style>

 

4.5. App.vue

<template>
  <div id="app">
    <h1>Todo List</h1>
    <TodoInput @add-todo="addTodo" />
    <TodoList
      :todos="todos"
      @toggle-todo="toggleTodo"
      @delete-todo="deleteTodo"
    />
  </div>
</template>

<script>
import TodoInput from "./components/TodoInput.vue";
import TodoList from "./components/TodoList.vue";

export default {
  components: {
    TodoInput,
    TodoList,
  },
  data() {
    return {
      todos: [], // 할 일 목록
    };
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push({ text: newTodo, completed: false });
    },
    toggleTodo(index) {
      this.todos[index].completed = !this.todos[index].completed;
    },
    deleteTodo(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

<style src="./assets/main.css"></style>

 

4.5. main.js

import { createApp } from 'vue';
import App from './App.vue';
import './assets/main.css';  // assets 폴더에서 스타일 로드

createApp(App).mount('#app');

 

5. 실행

 

감사합니다.