메리

1. Node.js 설치

2. VUE CLI 전역설치

> npm install -g @vue/cli

-g  : 로컬 어디에서든 vue-cli를 요청할 수 있도록 함. 

안 된다면 vscode를 껐다 켜보자.

3. vue 프로젝트 만들기

> vue.cmd create [프로젝트명]

Please pick a preset 에서 방향키를 이용하여 두 가지 선택지중에 하나를 선택할 수 있는데

위쪽의 Default로 했다.

프로젝트의 node_modules경로에 Babel, ESLint 가 포함되어있는 걸 볼 수 있음.

4. vue router 설치

> npm install vue-router --save

설치가 된 건가 안 된건가 모르겠넴

package-lock.json 파일에 router 내용이 추가된 것 확인

package.json 파일에 router 내용 추가된 것 확인

5. 프로젝트 실행

확인

브라우저 URL 탭에서 localhost:8080를 입력하여 이동하면

6. vetur 설치 (선택사항)

.vue 파일의 코드에 색을 입혀서 보기 편하게 만들어 준다고 함.

디렉터리 구조 확인

vscode에서 아까 생성한 vue 프로젝트 폴더를 연다.

* App.vue 가장 최상위 컴포넌트

* main.js : 가장 먼저 실행되는 javascript 파일. Vue 인스턴스를 생성한다. 

버전확인

> vue -V

이렇게 나온다면 

파워쉘이 아닌 cmd에서 해보면 된다.

+ 를 눌러서 cmd로 터미널을 만들어서 다시 입력해보면

으음~ 편안~

TEST

1. vue 이미지 지워보기

App.vue의 template 부분에서 img 소스를 지운다.

2. 원하는 text 로 변경

template 부분에서 helloworld를 지우고 넣어줌

App 컴포넌트를 사용하지 않아서 에러가 남

 script 부분에서도 지워주면 됨.

Vue 파일 구조 : 싱글파일 컴포넌트

• vue에서 제공하는 컴포넌트라는 개념에 template과 CSS 스타일링을 합쳐놓은 것
• .vue 파일내에서 template / script / style 부분으로 나뉜다.
• 하나의 파일에 HTML과 JS, CSS 를 한꺼번에 작성할 수 있는 장점이 있다.

• 싱글파일컴포넌트 아닌 경우 script 부분

new Vue({
	data: {
	aimal : 'monkey'
    }
})

• 싱글파일컴포넌트인 경우 script 부분

export default {
    data(){
        return {
            animal: 'Monkey'
        }
    }
}

참고한 블로그