[장기효(캡틴판교) - Vue.js 시작하기] 9. Vue CLI 설치 및 프로젝트 생성

출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js

 

 

9. Vue CLI 설치

 

- Vue CLI 란 터미널에서 vue 명령어들을 실행할 수 있게 만들고,

   명령어들을 통해 프로젝트 구성을 자동으로 만들어 주는 등 여러 기능을 사용할 수 있다.

 

(1) Vue CLI 설치

1. VS Code 에서 Terminal - new Termnal 클릭

2. npm install -g @vue/cli 입력 (안될 경우 sudo npm install -g @vue/cli 작성 or Terminal 종류를 바꿔본다)

 

(2) 프로젝트 생성

1. vue create vue-cli 입력 (vue-cli 이름의 프로젝트를 만드는 것이다)

2. 선택란이 나오는데 Default ([Vue 2] babel, eslint) 를 선택한다.

 > 여기까지 하면 해당 폴더에 vue-cli 폴더가 생성된다

 

(3) 서버실행

- cd vue-cli 입력 (vue-cli 폴더로 들어가기)

- npm run server ( 서버 실행 )

 > 브라우저 주소창에 localhost:8080을 치면 페이지가 뜬다.

 > terminal에서 ctrl + C 로 종료 가능

 

(4) 프로젝트 구성 설명

package.json 파일에 불러오는 라이브러리와 설정 등이 작성되어 있다.

구성은 index.html - main.js - App.vue - components의 HelloWorld.vue 순으로 불러온다.

App.vue 를 전부 지우고 코드를 작성하면 localhost:8080 화면에 보여진다.

 

component에 AppHeader.vue를 만들고 

내용에 vue를 친후 엔터를 누르면 템플릿이 나온다.

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

template 는 템플릿 속성

script는 그외 속성들

style은 css를 작성하는 곳이다.

 

 

(5) 간단한 props & event 예제

: 클릭시 상위 컴포넌트의 변수를 바꾸고 다시 그 변수를 받아 페이지에 표시

Components 폴더에 AppHeader.vue를 생성

 

1) 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>

<style>

</style>

 

2) App.vue

> 기존 App.vue 내용을 지우고 입력

<template>
  <div>
    <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>

<style>

</style>