vue+flask 시작. 기본적인 컴포넌트 제작.

뷰를 공부하면서 if for 이런 기본적인 문법들은 그냥 휘리릭 보고 지나갔는데 컴포넌트 만드는 부분에서 막혔다. 

일반적인 컴포넌트 만드는 방법이야 튜토리얼 페이지에 잘 나와있는데 이것보다 웹펙 구조를 파악해서

컴포넌트만 모아두는 곳에 가서 짜고 다른 곳에서는 그것을 가져오는... 그러니까 디자인패턴 처럼 이런 방법론을 바탕에 깔고 프로그래밍을 시작하는게 더 맞는것 같아서,(그리고 참고할 만한 레퍼런스가 있어서) 한번 만들어봤다.

1. https://kr.vuejs.org/v2/guide/single-file-components.html 를 참조해서 MyComponent.vue파일을 만들었다.

이것을 src/components안에다가 넣었다. 컴포넌트를 만들때, {{greeting}}을 <p>태그로 감싸줬는데 안 감싸주면 ESLint에서 texts보다는 element가 필요하다고 에러를 띄워버린다. 왜 그런지는 하다 보면 알겠지.

<template>
  <p>{{greeting}} World!</p>
</template>

<script>
export default {
  name: 'mycomponent',
  data: function () {
    return {greeting: 'Hello~~~~'}
  }
}
</script>

<style scoped>

</style>

2. /src/router/index.js를 열어서 내부에 내 컴포넌트를 추가해주었다.(기본적으로 HelloWorld라는 컴포넌트가 있었다)

이렇게 vue-router에 등록?을 해줘야 한다고 한다... 자세한건 잘 모르겠지만 c언어를 처음배울때 main함수의 의미는 모르지만 나중에 알게되는 것처럼 알게될거라고 생각하고 무작정 따라한다.

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import mycomponent from '@/components/MyComponent'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/rara',
      component: mycomponent
    }
  ]
})

3. npm run dev로 데브 서버를 실행시키고 위의 path:에 등록했던것처럼 http://localhost:8080/#/rara 경로로 가면 내가 등록한 컴포넌트가 보인다. 

대충 코드를 어떻게 짤지 윤곽을 잡는것 같다. 이거 말고도 링크를 만들어서 걸려면, main에 삽입되는 App.vue에 추가하면

된다고 한다.

App.vue.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link v-bind:to="'rara'">testsssss</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<router-link v-bind:to="'rara'">testsssss</router-link>가 중간에 삽입되었다.

저 버튼이 화면에 링크처럼 뜨며, 클릭시 /rara로 이동되어 내가 짠 컴포넌트를 보여줄수 있다.

그러니까.. 대충 배경 페이지에 ui와 네비게이션 바와 링크 등을 만들고 각각을 내가 만든 컴포넌트에 매핑시켜주면 기본적으로 구조는 나올것 같다.