Vue.js 프로젝트 기본 구조 잡기

1단계

Vue Cli 사용

 

2단계

Vuetify의 기본 템플릿 중 

googlekeep 버전을 사용하여 기본구조를 잡았다.

 

3단계

사이드 바에 있는 요소들을 바인딩 한 후 router-link를 통하여 라우팅 시켰다. 

 

<router-link :to="item.path">
  <v-list-item-content>
    <v-list-item-title class="grey--text">
    {{ item.text }}
    </v-list-item-title>
  </v-list-item-content>
</router-link>

 

다음과 같이 링크를 데이터로 바인딩 시킨 후 파라미터로 넘겨 받아서 해당 링크로 이동시킨다. item-text나 icon 부분도 데이터를 바인딩 시켜서 사이드바를 그려준다. 해당 예제는 googlekeep기본 템플릿에 적용되어 있는 예제이다.

items: [
        { icon: 'mdi-chart-histogram', text: 'Monitoring', path: 'home'},
        { divider: true },
        { heading: 'Token Manage' },
        { icon: 'mdi-bank-transfer', text: 'Trasfer', path: 'keep'},
        { icon: 'mdi-bank-transfer', text: 'approve', path: 'about' },
        { divider: true },
        { heading: 'Admin Settings' },
        { icon: 'mdi-account-star-outline', text: 'manager setting', path: 'about' },
        { icon: 'mdi-account-supervisor', text: 'Holder', path: 'about' },
        { divider: true },
        { heading: 'Event Logs' },
        { icon: 'mdi-calendar-multiple-check', text: 'Transfer Event', path: 'about' },
        { icon: 'mdi-calendar-multiple-check', text: 'Approve Event', path: 'about' },
        { divider: true },
        { heading: 'settings' },
        { icon: 'mdi-account-off-outline', text: 'Log-out', path: 'home' },
        { icon: 'mdi-checkbox-marked-circle-outline', text: 'SmartContract', path: 'home' },
        { divider: true },
      ],

4단계

화면을 구성한다. 화면의 구조도는 다음과 같다.

<template>
  <div id="app">
    <v-app id="keep">
      <navimenu />
      <router-view />       
    </v-app>
  </div>
</template>

<script>
import navimenu from './components/navimenu';

export default {
  name: 'App',

  components: {
    navimenu
  },

  data: () => ({
  }),
  methods: {
  }
};
</script>

App.vue의 구성은 다음과 같으며 불러와서 사용하는 컴포넌트는 navimenu(side bar)이다. 

따라서 앞으로의 화면은 <router-view />위치에 오는 컴포넌트로 구분되며 해당 위치에 들어가는 컴포넌트는 views폴더에 위치한다. view폴더 하나하나가 페이지 하나하나가 되며 동시에 하나의 컴포넌트이다. 또한 views 폴더 안에 있는 하나하나의 페이지들은 각각 components안에 있는 컴포넌트를 가져와서 쓰게 된다. 이때 같은 컴포넌트를 여러 뷰 에서 가져와서 쓸 수도 있으며, 하나의 뷰 안에 다른 뷰를 넣는등의 작성도 가능하다. 

 

정리

 

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Keep from '../views/keepexample.vue'

Vue.use(VueRouter)

  const routes = [
  {
    path: '/',
    name: 'Main',
    component: Home
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: About
  },
  {
    path: '/keep',
    name: 'keep',
    component: Keep
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

 다음과 같이 라우터 안에 각각 경로를 넣어둔 후에 나중에 <rotuer-view />를 작성하게 되면 해당 path를 찾아서 거기에 해당되는 컴포넌트를 불러오는 식으로 구현된다.

 

따라서 rotuer-view에 새로 넣고자 하는 페이지를 넣은 후 해당 path를 view폴더에 먼저 넣은 후에 <router-viw />안에 넣어 1차적으로 페이지를 구성하고 2차적으로는 각각 vue폴더안의 vue에서 또 컴포넌트를 불러와서 페이지를 작성하는데 이 컴포넌트들은 components폴더 안에 저장해 둔다.

 

해당 부분에 대한 강의는 추후 유튜브 채널에 올라올 예정이다.

https://www.youtube.com/channel/UCHsRy47P2KlE749oAAjb0Yg

타임해커