[vue.js] 프로젝트 생성 도구 : Vue CLI

# Vue CLI(명령어 도구)

npm install -g @vue/cli

 

# Vue CLI 도구 설치시 문제점 해결방법

- 권한 문제 : sudo npm install -g @vue/cli // 관리자 권한으로 실행

 

# Vue CLI 설치 경로(global npm install)

/usr/local/lib/node_module

%USERPROFILE%\AppData\...

 

# Vue CLI 2.X와 3.x의 차이점

[Vue CLI 2.x]

vue init '프로젝트  템플릿 유형' '프로젝트 폴더 위치'

[Vue CLI 3.x]

vue create '프로젝트 폴더 위치'

 

vue create '프로젝트이름'

cd '프로젝트명'

npm run serve

 

# CLI로 생성한 프로젝트 폴더 구조 확인 및 main.js 파일 설명

- package.json 내 scripts 속성에 serve라는 명령어가 정의되어 있음

npm run serve 라는 명령어를 입력하면, package.json 내 scripts 속성 내 serve 명령어로 지정된 명령어를 수행하라는 의미

 

import App from './App.vue' // 싱글파일 컴포넌트

 

new Vue({

  render: h => h(App), // render 함수로 지역 components로 지정

}).$mount('#app')

 

// 위와 동일

new Vue({

el: '#app',

  render: h => h(App),

})

 

# 싱글 파일 컴포넌트 소개 및 여태까지 배운 내용 적용하는 방법

Tip. .vue라는 파일내에서, 'vue'를 빈 문서에 쓰면 자동으로, vue 형태의 템플릿을 자동완성해 준다.

<template>

// HTML  

</template>

<script>

export default {

// Javascript

}

</script>

<style>

/* CSS */

</style>

 

# App.vue와 HelloWorld.vue 설명

<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/>

//위의 3가지 방식을 전부 지원

  </div>

</template>

<script>

import HelloWorld from './components/HelloWorld.vue'

export default {

  // 인스턴스 옵션 속성

  name: 'App',

  components: {

    HelloWorld

    //'hello-world' : HelloWorld //해당 로직이 숨어 있는 것을 의미한다.

  }

}

</script>

... App.vue 중

<template>

  <div class="hello">

    <h1>{{ msg }}</h1> // Data 바인딜

...

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  props: {            // 부모->자식으로 전달하는 props 속성 선언법

    msg: String

  }

}

</script>

... Hello.vue 중