Vue.js - vue-cli 사용 방법과 살펴보기

 

 

 

---

Vue.js - vue-cli 사용 방법과 살펴보기

2022/01/17

 

 

1.VUE CLI

-홈페이지 존재

-커맨드와 인터페이스의 약자이며, 명령어로 실행하는 보조도구

 

2.설치하기

-Get started의 Installation에서 실행 명령어로 설치가능

-터미널 오픈

-node -v로 현재 노드버전 확인 => v16.1.0

-npm -v로 현재 버전 확인 => v7.11.2

-아래 내용 작성하여 CLI 설치하기

npm install -g @vue/cli

 

 

-npm도 자동으로 업데이트 되고 설치도 완료됨

 

 

*에러가 날때 대처 방법

a.권한이 없는 경우 sudo 포함하여 작성

 

sudo npm install -g @vue/cli

 

b.패키지 설치 경로

On Unix systems they are normally placed in /usr/local/lib/node or /usr/local/lib/node_modules

 

 

3.처음 프로젝트 파일 생성하기

-vue create ‘프로젝트 폴더 위치’

(*vue 3.0에서는 플러그인 기반이라 2.0버전 처럼 따로 템플릿 유형을 적어줄 필요가 없음)

vue create vue-cli 생성

 

 

-터미널에 생성 됨

=>방향키로 설치할 버전을 선택할 수 있는데 vue 3을 선택하기

 

 

-다음 명령어를 실행하라는 안내가 나온다

 

 

-두가지 모두 실행하면, 아래와 같이 로컬 포트 번호가 뜬다. (8080이 뜸)

 

 

 

-npm run serve는 package.json의 script > serve와 동일한 명령어

 

 

 

 

-실행시, public > index.html

(*<!-- built files will be auto injected -->

주석을 통해 파일들이 자동으로 추가 되는 것을 알 수 있음)

 

 

 

-src > components > main.js를 통해  vue인스턴스 확인 가능

 

 

 

-render은 뷰 내부에서 사용하는 함수 

 

 

 

 

4.싱글파일 컴포넌트

 

-새파일 생성하기 > 파일명.vue > vu입력+tab키 클릭시 자동으로 생성 

(*html, css, javascript를 한 파일 안에서 관리 가능)

 

<template>
  <!---   html   --->
</template>

<script>
export default {

}
/// javascript
</script>

<style>
/*css*/
</style>

 

 

-함수로 정의 / vue의 기본 속성

 

a.함수로 정의할 경우

var appHeader = {
    template: '<div>header</div>'
}

 

 

b.vue에서 사용할 경우

<template>
 <div>appHeader</div>
</template>

 

 

(*html 뿐만 아니라 자바스크립트, 스타일도 동일)

a.함수로 사용할 경우

var appHeader = {
    methods: {
        addNum: function(){
            
        }
    }
}

 

b.뷰에서 사용할 경우

<script>
export default {
    methods: {
        addNum: function(){
            
        }
    }
}
/// javascript
</script>

 

 

 

5.기본 vue파일 살펴보기

-src > main.js 파일을 확인하면, App.vue라는 파일에서 App이라는 변수를 가져옴

import App from './App.vue'

 

 

-App.vue 파일을 확인하기

-HellowWolrd라는 vue 파일 안에서 HelloWorld를 가져옴

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

 

 

-내용 확인 

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

 

-사용

<h1>{{ msg }}</h1>