Vue cli

2019. 07. 01 (Mon)

Vue cli 소개

커맨드창에서 vue.js 프로젝트 생성, 관리 및 실행을 하기 위한 프레임워크

vue.js 통합 개발 환경

1. 실행 환경 세팅

기본적으로 node를 설치한다.

이후 npm을 사용하여 패키지 설치

npm?

node에서 제공하는 패키지 관리 매니저

vue.js프로젝트에 필요한 패키지를 설치할 수 있다.

vue cli 패키지 설치

# vue/cli 패키지 설치
npm install -g @vue/cli

# vue.js 버전 확인
vue --version

• -g가 붙어 있는 것은 global 환경에 대해 설치한다는 의미이다.

프로젝트 생성

vue create <project 이름>

# 프로젝트 환경 설정을 직접 선택한다.
vue create .

• 자동적으로 vue.js개발을 위한 환경이 설정된 프로젝트 생성

프로젝트 생성 결과

• App.vue, man.js, index.html등 vue 개발에 필요한 환경이 세팅된다.
• 심지어 .gitignore까지 자동으로 생성

package.json

vue.js 개발에 필요한 라이브러리(의존성)을 적어놓은 파일

실제로 vue 개발에 필요한 라이브러리를 설치하기에 시간이 많이 걸리므로 따로 빼놓아 저장

추가적인 설치로 라이브러리를 설치

# 현재 위치한 폴더에서 package.json에 적혀있는 모든 라이프러리를 프로젝트에 설치
npm install

• 현재 위치한 프로젝트 폴더에만 설치한다.

실행

vue-cli-service serve: npm환경에서 vue.js서버를 실행시키는 명령어

• package.json에서 이를 serve라는 축약어로 대체해 놓았다.

축약어로 프로젝트 실행

npm run serve

• 실행시 프로젝트 빌드 후 로컬 환경에서 구동

프로젝트 실행 결과

실행 화면

2. 프로젝트 구조

index.html

사용자에게 보여지는 실제 페이지

App.vue에서 생성한 요소들을 클래스가 정의된 tag에 렌더링

main.js

페이지 렌더링에 필요한 plugin 등을 선언

App.vue에서 정의된 컴포넌트를 사용하여 Vue객체 생성, tag에 mount

App.vue

vue.js 프로젝트의 최상위 컴포넌트

APP.vue는 하부 컴포넌트를 사용하여 렌더링할 요소를 정의한다.

3가지 부분으로 나뉜다

template

• importgks 자식 컴포넌트를 선언하는 부분
• 페이지에 렌더링될 컴포넌트 선언
• 태그로 자식 컴포넌트에 데이터를 넘겨줄 수 있다.

<HelloWorld msg="Welcome to Your Vue.js App"/>

script

• 해당 컴포넌트의 행위를 정의하는 부분
• 컴포넌트 import, export. 컴포넌트의 이름 정의
• component 부분에 import한 컴포넌트 선언

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}

• export default: 해당 컴포넌트 파일 이름으로 export

style

• 컴포넌트에서 적용할 스타일 정의
• 자식 컴포넌트에 까지 적용되며, scoped 적용시 해당 컴포넌트에서만 적용

3. 작동방식

1. 유저가 페이지를 요청
2. index.html에서 페이지 렌더링에 필요한 객체를 main.js에 요청
3. main.js에서 Vue객체를 생성하며 정의된 App.vue에 컴포넌트 요청
4. App.vue는 자신 밑에 정의된 여러 컴포넌트를 불러와 연결한 후 main.js에 반환
5. main.js는 Vue객체를 생성하여 정의된 tag에 mount

구조도

• ← Previous Post
• Next Post →