야구 경기 기록 사이트 만들기

야구 경기 기록 사이트 만들기

vue

 

Get started with Vuetify — Vuetify (vuetifyjs.com)

vue create baseball

cd baseball

vue add vuetify

yarn serve

 

baseball

 

 

App.vue에 vuetify - application 붙이기

Application service — Vuetify (vuetifyjs.com)

HelloWorld 제거가 중요함

 

 

drawer 내용 반영 Navigation drawer component — Vuetify (vuetifyjs.com)

<v-navigation-drawer permanent> <= 난 app으로 적혀있는데?! 나중에 차이점 찾아볼 것

안의 내용을 copy & paste

</v-navigation-drawer>

data: () => ({
    //
    items: [
          { title: '경기 현황판', icon: 'mdi-view-dashboard' },
          { title: '경기 정보 등록', icon: 'mdi-image' },
          { title: '경기 기록', icon: 'mdi-help-box' },
        ],
        right: null,
  }),

 

vue-router 적용 - Home | Vue Router (vuejs.org)

router 설치 (버전이 중요한 것 같음)

설치된 vue-router 삭제 : npm uninstall vue-router --save

버전 명시해서 vue-router 설치 : npm install vue-router@3.5.3

 

views 폴더 생성 및 기본 view 파일 작성 (GameHome.vue, GameDashBoard.vue, GameCreate.vue, GameRecord.vue)

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'GameHome',
        component: () => import('../views/GameHome.vue')
    },
    {
        path: '/gamedashboard',
        name: 'GameDashBoard',
        component: () => import('../views/GameDashBoard.vue')
    },
    {
        path: '/gamecreate',
        name: 'GameCreate',
        component: () => import('../views/GameCreate.vue')
    },
    {
        path: '/gamerecord',
        name: 'GameRecord',
        component: () => import('../views/GameRecord.vue')
    },
    { path: '*', redirect: '/' }
]

const router = new VueRouter({
    mode: 'history',
    routes
})

export default router

 

main.js 에 router 추가

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'

Vue.config.productionTip = false

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

 

App.vue 에 drawer item의 link 추가

items: [
      {
        title: "경기 현황판",
        icon: "mdi-view-dashboard",
        link: "/gamedashboard",
      },
      { title: "경기 정보 등록", icon: "mdi-image", link: "/gamecreate" },
      { title: "경기 기록", icon: "mdi-help-box", link: "/gamerecord" },
    ],

 

drawer 클릭하면서 url 및 <router-viewer> 영역 변경 확인