[Vue.js] vue cli와 이전 방식 비교

Vue Cli와 이전 방식의 비교

• 아래 코드에 주석을 통해 설명했지만, 정리해보면
• new Vue({ }) 라는 인스턴스 방식에서 export default { } 방식으로 변경
• const component { template : '
  ' } 방식에서 template태그 안으로 html 부분 이동
• 컴포넌트 태그 영역은 kebab-case, PascalCase 모두 같다. => 아래 인스턴스 옵션 속성, 컴포넌트 옵션 속성 부분에 components: { HelloWorld } 이런 부분에 선언되어있는 것이고, 이 HelloWorld 는 'hello-world' = HelloWorld와 같다.

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />

    <!-- 아래 세가지 방식 다 같은 의미 -->

    <!-- <hello-world></hello-world>
    <HelloWorld></HelloWorld>
    <HelloWorld /> -->
  </div>
</template>

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

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

    // 위 HelloWorld만 적어주는 것과 아래가 같은것이다.
    // 'hello-world': HelloWorld,
  },
};

// 위 export default와 아래 new Vue 인스턴스 방식이 같다고 보면된다.

// new Vue({
//   name: 'App',
//   components: {
//     HelloWorld,
//     // 위 HelloWorld만 적어주는 것과 아래가 같은것이다.
//     // 'hello-world': HelloWorld,
//   },
// });
</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>