[Vite] 튜토리얼: Vite와 Vue.js를 이용한 간단한 프로젝트 만들기

이 튜토리얼에서는 Vite와 Vue.js를 이용하여 간단한 To-Do 리스트 앱을 만들어보겠습니다. 이 프로젝트를 통해 Vite의 설치, 개발 서버 실행, Vue.js 컴포넌트 작성, 상태 관리, 그리고 빌드와 배포까지의 기본적인 과정을 익힐 수 있습니다.

프로젝트 초기화 및 설치

먼저, 프로젝트를 초기화하고 Vite와 Vue.js를 설치합니다.

npm init -y
npm install vite vue@next --save

개발 서버 실행

프로젝트 디렉토리에 index.html 파일과 main.js 파일을 생성합니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Todo App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

// main.js
import { createApp } from 'vue';
import App from './App.vue';

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

프로젝트를 개발 서버로 실행합니다.

npx vite

개발 서버가 실행되면 브라우저에서 http://localhost:3000을 열어 앱을 확인합니다. 아직 App.vue 파일은 생성하지 않았기 때문에 화면에는 아무 내용도 나타나지 않을 것입니다.

컴포넌트 생성

App.vue 파일을 생성하여 간단한 To-Do 리스트 앱을 만들어보겠습니다.

<!-- App.vue -->
<template>
  <div>
    <h1>My To-Do List</h1>
    <div>
      <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Enter your task">
      <button @click="addTodo">Add</button>
    </div>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: [],
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() !== '') {
        this.todos.push(this.newTodo);
        this.newTodo = '';
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

상태 관리

To-Do 리스트의 데이터를 상태 관리로 관리하기 위해 Vuex를 설치하고 사용합니다.

npm install vuex@next --save

store.js 파일을 생성하여 스토어를 정의합니다.

// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      todos: [],
    };
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo);
    },
    deleteTodo(state, index) {
      state.todos.splice(index, 1);
    },
  },
});

export default store;

main.js 파일에서 스토어를 앱에 등록합니다.

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store.js';

const app = createApp(App);
app.use(store);
app.mount('#app');

App.vue 파일에서 Vuex를 활용하여 상태 관리를 합니다.

<!-- App.vue -->
<template>
  <!-- ... -->
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  // ...
  computed: {
    ...mapState(['todos']),
  },
  methods: {
    ...mapMutations(['addTodo', 'deleteTodo']),
  },
};
</script>

빌드 및 배포

개발이 완료되면 프로젝트를 빌드하여 배포합니다.

npx vite build

빌드가 완료되면 dist 폴더에 최적화된 파일들이 생성됩니다. 이 파일들을 웹 서버에 배포하여 앱을 배포할 수 있습니다.

결론

이 튜토리얼에서는 Vite와 Vue.js를 이용하여 간단한 To-Do 리스트 앱을 만드는 방법을 알아보았습니다. Vite의 설치, 개발 서버 실행, 컴포넌트 작성, 상태 관리, 그리고 빌드 및 배포까지의 기본적인 과정을 익힐 수 있었습니다. 이제 여러분은 Vite와 Vue.js를 이용하여 실제 프로젝트를 개발할 수 있을 것입니다. Happy coding!

'Framework > Vite' 카테고리의 다른 글

[Vite] Vite와 상태 관리 라이브러리 연동 (0)	2023.08.07
[Vite] Vite 플러그인 사용하기 (0)	2023.08.07
[Vite] Vite와 기타 빌드 도구 비교 (0)	2023.08.07
[Vite] Vite 프로젝트 빌드 및 배포 (0)	2023.08.07
[Vite] 단일 파일 컴포넌트(SFC) 사용하기 (0)	2023.08.07