Table of Contents

Vuejs로 개발해보는 싱글 페이지 애플리케이션 만들기

Vue.js란?

Vue.js는 모던 웹 애플리케이션을 만들기 위한 프로그레시브 프레임워크입니다. Vue.js는 간단하며 빠르고 유연합니다. 또한, React와 Angular의 장점을 모두 가지고 있습니다. 이번 포스트에서는 Vue.js를 사용하여 싱글 페이지 애플리케이션을 만들어보겠습니다.

프로젝트 설정하기

먼저, Vue CLI를 사용하여 프로젝트를 생성합니다. Vue CLI가 설치되어 있지 않은 경우 npm을 사용하여 설치합니다.

npm install -g @vue/cli

프로젝트를 생성하려면 다음 명령어를 실행합니다.

vue create my-app

위 명령어를 실행하면 프로젝트 이름을 입력하고, Babel, Router, Vuex 등 필요한 설정 옵션을 선택할 수 있습니다.

Vue Router 설치하기

Vue Router는 Vue.js용 공식 라우터 라이브러리입니다. 이를 사용하여 싱글 페이지 애플리케이션을 만들 수 있습니다. Vue Router를 설치하려면 다음 명령어를 실행합니다.

npm install vue-router

Vue Router 설정하기

Vue.js에서 Vue Router를 사용하려면, main.js 파일에서 Vue를 import 한 다음 Vue.use(Router)를 호출합니다.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

또한, 라우트를 설정해야 합니다. 이를 위해 src/router.js 파일을 생성하고 다음과 같이 작성합니다.

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

이 코드는 ‘/’ 경로에 대해 Home.vue 컴포넌트를 렌더링하며, ‘/about’ 경로에 대해서는 About.vue 컴포넌트를 렌더링합니다.