[Vue] 2. Hello world만 출력

1. 프로젝트에서 src 폴더 아래 views 폴더를 생성한 후 MainPage.vue 파일을 생성한다

   

2. MainPage.vue 파일 작성

    <template>
        <div>
            Hello World!!
        </div>
    </template>
   
    <script>
    export default {
      name: 'MainPage'
    }
    </script>

3. router/index.js 수정

    import Vue from 'vue'
    import Router from 'vue-router'
    import MainPage from '@/views/MainPage'
   
    Vue.use(Router)
   
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'MainPage',
          component: MainPage
        }
      ]
    })

4. App.vue 수정

    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
   
    <script>
    export default {
      name: 'App'
    }
    </script>

5. 서버 가동(http://localhost:8080)