Vue CLI

Vue CLI 소개

Vue CLI 공식 사이트 링크

사전 준비

• node lts
• npm
• 터미널에 npm install -g @vue/cli 입력
• 권한 문제 발생 시 sudo npm install -g @vue/cli로 입력 (관리자권한)

Vue CLI 3.X

• 새 창 터미널에 vue create 프로젝트 폴더 위치(이름)
• cd vue-cli로 경로접근
• npm run serve
• http://localhost:8080/ 브라우저 실행

싱글파일 컴포넌트 기본 구조 예시

<template>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  // 인스턴스 옵션 속성 or 컴포넌트 옵션 속성
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

컴포넌트 생성해보기

컴포넌트 이름은 PascalCase로, 최소한 두 단어 이상으로 조합.
ex) <main /> 으로 컴포넌트 태그를 만들면 html에 이미 있는 태그이기 때문에
App.vue

<template>
  <div>
    <app-header></app-header>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'
export default {
  data: function(){
    return{
      str: 'hi'
    }
  },
  components: {
    'app-header': AppHeader
  }
}
</script>

appHeader.vue

<template>
  <header>
    <h1>header</h1>
  </header>
</template>

<script>
export default {

}
</script>

싱글 파일 컴포넌트에서 props 속성/event emit 사용하는 방법

AppHeader.vue

<template>
  <header>
    <h1>{{ propsdata }}</h1>
    <button v-on:click="sendEvent">send</button>
  </header>
</template>

<script>
export default {
  props:['propsdata'],
  methods: {
    sendEvent: function() {
      this.$emit('renew')
    }
  }
}
</script>

App.vue

<template>
  <div>
    <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터이름"></app-header> -->
    <app-header
     v-bind:propsdata="str"
     v-on:renew="renewStr"
     ></app-header>
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'
export default {
  data: function(){
    return{
      str: 'Header'
    }
  },
  components: {
    'app-header': AppHeader
  },
  methods:{
    renewStr: function() {
      this.str = 'hi';
    }
  }
}
</script>